React state 似乎没有在渲染前获取 api 并设置状态

Question

我正在尝试获取报价 api 并使用第一个报价填充反应组件。稍后我将使用该按钮随机选择一个。我现在刚刚学习 React，我在 freecodecamp 中的 React 教程没有显示任何有关 fetch 的内容，所以我找到了在线提取这些引用的代码。如果我在 this.setState 之后添加另一个回调，我可以 console.log 并查看所有数组，但即使在渲染中使用 if 语句，它似乎也不存在于要渲染的状态中。关于设置状态或在状态设置为数组后渲染组件，我缺少什么。我已经看过这个 stackoverflow 问题。

class Quotes extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      quotes: []
    }
  }
  
  componentDidMount() {
      fetch("https://type.fit/api/quotes")
      .then((response) => response.json())
      .then(quotesList => {
          this.setState({ quotes: quotesList });
      });
  }
  
  render(){ 
    if (!this.state.quotes) {
            return <div />
        }
    
    return(
      <div>
        <p id="text">{this.state.quotes[0].text}</p>
        <p id="author">{this.state.quotes[0].author}</p>
        <div id="buttons">
          <button id="new-quote">New Quote</button>
          <a id="tweet-quote" href="#"><i className="fa-brands fa-twitter"></i></a>
        </div>
      </div>
    );
  }
}

class QuoteBox extends React.Component{
  constructor(props){
    super(props)
  }
  
  render(){
    return(
      <div id="quote-box">
         <Quotes />
      </div>
      
    );
  } 
}

ReactDOM.render(<QuoteBox />, document.getElementById('page-wrapper'))

#page-wrapper{
  
  #quote-box{
    display:flex;
    height:100vh;
    justify-content:center;
    align-items:center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="page-wrapper">
  
</div>

Answer 1

空数组 [] 不是假值，因此您的 if 不会被触发，并且会完成越界数组访问。检查 if 中的数组长度，它将起作用。

请参阅 StackOverflow 上的此线程，其中涵盖真值和假值。

这里你的代码与 if 内的条件更改为
this.state.quotes.length === 0。

class Quotes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [],
    };
  }

  componentDidMount() {
    fetch("https://type.fit/api/quotes")
      .then((response) => response.json())
      .then((quotesList) => {
        this.setState({ quotes: quotesList });
      });
  }

  render() {
    // check for array length here
    if (this.state.quotes.length === 0) {
      return <div>Fetching data...</div>;
    }

    return (
      <div>
        <p id="text">{this.state.quotes[0].text}</p>
        <p id="author">{this.state.quotes[0].author}</p>
        <div id="buttons">
          <button id="new-quote">New Quote</button>
          <a id="tweet-quote" href="#">
            <i className="fa-brands fa-twitter"></i>
          </a>
        </div>
      </div>
    );
  }
}

class QuoteBox extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="quote-box">
        <Quotes />
      </div>
    );
  }
}

ReactDOM.render(<QuoteBox />, document.getElementById("page-wrapper"));

#page-wrapper{
  
  #quote-box{
    display:flex;
    height:100vh;
    justify-content:center;
    align-items:center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="page-wrapper">
  
</div>