在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方法之前设置状态，或者可以在映射之前对设置的数组进行检查。