在 React 中使用数组键迭代循环状态对象

Posted 2023-02-22

【中文标题】在 React 中使用数组键迭代循环状态对象

【英文标题】：Iterate loop over state object with an array key in React

【发布时间】：2017-06-23 23:49:14

【问题描述】：

我有一个函数 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 错误。 Exploring similar questions，我知道我将不得不声明一个空状态数组，我以不同的方式做了，但都没有奏效。谁能给我一个适当的答案，最好有完整的逻辑。

我尝试了另一种方式将状态数组声明为render() 中的const，但没有获得成功的结果。

【参考方案1】：

好的，这实际上与您的component's lifecycle有关

问题是您的render 方法在componentDidMount 方法之前运行。所以你的组件第一次渲染你的状态看起来像这样：

  bar: ,

所以 bar 上没有数组属性，这意味着您无法对其进行映射（这就是您得到错误的原因?）。相反，您可以使用 componentWillMount 方法在渲染方法运行之前设置状态，或者您可以在映射之前检查正在设置的数组。

【讨论】：

非常感谢！！一个小时以来我一直在尝试不同的调整，但使用 componentWillMount 完美无缺。