React JSX ListItem 键连接

Question

为了模块化我的应用程序，我正在动态创建列表。数据显示正常，但是，我无法获得唯一的列表项 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>
    )
}

我通过这个片段调用组件

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

您不要将键放在单个组件中，而是在实际通过映射将它们推入数组时声明它，或者在本例中使用 for each 循环。

查看您的回答，您的回答正确无误：

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

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

有关密钥的更多信息，请在此处查看 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 键连接

React JSX ListItem Key concat

jsx

reactjs