在React中使用數組鍵迭代狀態對象

Question

我有一個函數getBar()返回如下對象：

{
  foo: 'value',
  array: ['a', 'b', 'c']
}

這是我的React組件，調用上述函數，即getBar() ：

class foo extends Component {

  state = {
    bar: {}
  };    
  componentDidMount(){
    this.setState({
      bar : getBar()
    });
  }
  render() {
    {this.state.bar.array.map((value, i) => <div class="row" key={i}>{value}</div>)}
  }
}

它總是給我帶來Uncaught TypeError: Cannot read property 'map' of undefined錯誤的Uncaught TypeError: Cannot read property 'map' of undefined 。 通過研究類似的問題 ，我知道必須聲明一個空狀態數組，該數組以不同的方式執行，但沒有任何作用。 任何人都可以最好地以完整的邏輯給我一個適當的答案。

我嘗試了另一種在render()中將狀態數組聲明為const ，但未獲得成功的結果。

Answer 1

好的，所以這實際上與組件的生命周期有關

問題是您的render方法在componentDidMount方法之前運行。 因此，組件第一次呈現狀態時如下所示：

{
  bar: {},
}

因此，bar上沒有數組屬性，這意味着您無法對其進行映射（這就是為什么會出現錯誤errors）。 相反，您可以使用componentWillMount方法在運行render方法之前設置狀態，或者可以在映射之前對設置的數組進行檢查。