沒有來自 api 的條件渲染，React 不會顯示

Question

當我從 api 獲取數據時，為什么組件不呈現/顯示任何內容？ 下面的代碼只是給了我一個空白頁

 render(){
    return (
      <div>
        <p>{this.state.character[0]}</p>
      </div>
    )
  }

但是當我進行一些條件渲染時，它會顯示數據。

 render(){
    return (
      <div>
        {<p>{this.state.character? this.state.character[0] : null}</p>}
      </div>
    )
  }

Answer 1

來自 API 的數據加載需要時間，因此第一個代碼沒有任何數據，因為來自 API 的請求未完成。 您無法訪問其中沒有任何內容的索引。 所以條件基本上是使其安全顯示。

Answer 2

你是如何獲取數據的？ 希望在componentDidMount()中。 componentDidMount()在render()之后運行，這意味着，當組件第一次加載/掛載時，沒有數據。 數據被接收，然后在安裝組件后添加到 state