Question

要模块化我的应用，我正在动态创建列表。数据显示正常，但是，我无法实现唯一的列表项ID。我试图将键设置为映射与prop。连接的数组项。

render() {
    return (
      <div>
        <Header as='h3'>{this.props.data['Day'+this.props.day]}</Header>
        <ul>
          {this.props.cities.map((park) => <li key={park+this.props.day}>{park} {this.props.data[park+'Day'+this.props.day+'PrecipPercent']}</li>)}
        </ul>
      </div>
    )
}

我通过此代码段调用组件

let eachDay = [];
for (var i = 0; i < this.state.days; i++) {
      eachDay.push(<MultiParkDetails cities={this.state.sortedCities} data={this.state.weatherData} cols={5} day={i}></MultiParkDetails>);
    }
return ({eachDay})

Answer 1

这里的问题是你需要将密钥添加到组件本身，并将其创建并推送到数组中。

let eachDay = [];
for (var i = 0; i < this.state.days; i++) {
      eachDay.push(<MultiParkDetails key={ uniqueKeyGoesHere} cities={this.state.sortedCities} data={this.state.weatherData} cols={5} day={i}></MultiParkDetails>);
    }
return ({eachDay})

你没有将密钥放在单个组件中，当你实际通过map将它们推入一个数组时，或者在这种情况下使用for each循环时，你会声明它。

回顾你的答案，你的答案是正确的：

{this.props.cities.map((park) => <li key={park+this.props.day}>{park} {this.props.data[park+'Day'+this.props.day+'PrecipPercent']}</li>)}

只要连接的值是唯一的。如果您收到任何警告，请在此处发布。你会得到两个警告中的一个，一个是你没有在需要的地方设置一个密钥，第二个是警告说发现重复的密钥意味着你没有使用足够独特的密钥。

有关密钥的更多信息，请参阅此处的facebook文档：https://facebook.github.io/react/docs/lists-and-keys.html#keys

Answer 2

只需将数组的索引用作键，它将始终是唯一的。使用此：

let eachDay = [];
for (var i = 0; i < this.state.days; i++) {
      eachDay.push(<MultiParkDetails key={i} cities={this.state.sortedCities} data={this.state.weatherData} cols={5} day={i}></MultiParkDetails>);
    }
return ({eachDay})

React JSX ListItem Key concat

2 个答案: