javascript - JS中如何映射数组

Question

我正在尝试迭代从 Django 获取的 React 中的对象数组。我的对象是一个数组，但是当我尝试映射它时，出现类型错误:无法读取未定义的属性映射。

国家有结构:

Unit: { alliances: [{description: "", id: 6, name: "Elusive"}, {...}] icon_url id name }

这就是 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 是一个空数组，没有 alliances 属性。

您可以通过在渲染中添加检查来防止这种情况:

{this.state.unit.alliances && this.state.unit.alliances.map(alliance => (
  <div key={alliance.id}>
    <h4>{alliance.name}</h4>
  </div>
))}

话虽如此，您可能应该保持状态一致，并让 unit 为空对象而不是空数组。您还可以将您的状态设置为 unit: {alliances: []} 并完全跳过安全防护。