Question

我试图遍历从Django获取的React中的对象数组。我的对象是一个数组，但是当我尝试映射它时，我遇到一个typeerror：无法读取未定义的属性映射。

状态具有以下结构：

单位：{ 联盟： [{描述：“”，id：6，名称：“难以捉摸”}，{...}] icon_url ID 名称 }

这也是React Developer tools中显示的内容。在另一个组件中，我正在做一个与状态类似的事情，状态是一个嵌套的单元阵列，具有与上述相同的结构，所以我茫然地知道为什么它不起作用。

class UnitInfo extends Component {
  state = {
    unit: []
  };

  // ...

  render() {
    return (
      <div>
        <h1>{this.state.unit.name}</h1>
        <img src={this.state.unit.icon_url} alt="{this.state.unit.name} icon" />
        {this.state.unit.alliances.map(alliance => (
          <div key={alliance.id}>
            <h4>{alliance.name}</h4>
          </div>
        ))}
      </div>
    );
  }
}

Answer 1

您正在从Django获取数据，这意味着最初数据不存在。它仅在获取完成且状态已更新后才存在。

如您的代码示例所示，您的初始状态为unit: []，这就是为什么您无法映射到unit.alliances的原因，因为unit是一个空数组并且没有{{1 }}属性。

您可以通过在渲染器中添加检查来防止这种情况的发生：

alliances

话虽这么说，您可能应该保持状态一致，并使{this.state.unit.alliances && this.state.unit.alliances.map(alliance => ( <div key={alliance.id}> <h4>{alliance.name}</h4> </div> ))}是一个空对象而不是一个空数组。您也可以将状态设为unit，然后完全跳过安全防护措施。

如何在JS中映射数组

1 个答案: