React JSX ListItem Key concat答案

【问题标题】：React JSX ListItem Key concatReact JSX ListItem Key concat
【发布时间】：2017-08-31 09:52:03
【问题描述】：

为了模块化我的应用程序，我正在动态创建列表。数据显示正常，但是，我无法获得唯一的列表项 ID。我正在尝试将键设置为被映射的数组项与道具连接。

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>
    )
}

我通过这个 sn-p 调用组件

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})

【问题讨论】：

你能在这里发布你的cities数组是什么样的吗？

标签： reactjs jsx

【解决方案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

【讨论】：

【解决方案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})

【讨论】：