React - 为什么我得到“如果我有一个键（索引），那么数组或迭代器中的每个子节点都应该有一个唯一的”key“prop”错误？

Question

我对使用react的迭代中的键有疑问。我知道他们是独一无二的，我选择它作为索引，因为我的数据中没有id。我一直收到错误：

数组或迭代器中的每个子节点都应该有一个唯一的“键”支柱。

我包含了数据数据的一部分，也许它与数据有关？任何想法都会很棒，因为我不知道错误的原因，因为我有一把钥匙。谢谢!!

我的数据：

[{
DestinationLocation :["AMS", "BCN", "BOS", "BRU", "LAS", "LAX", …],
OriginLocation: ["JFK", "LGA", "EWR"],
currency: ["USD", "USD", "USD", "USD", "USD", "USD", ...",
...
}]

class App extends React.Component {
  render() {
    const flights = this.props.flightData.map((flight, i) => {
        return (
            <div>
                <ul>
                    <li key={i}>Flight leaves from: {flight.OriginLocation}</li>
                </ul>
            </div>
        )
    })

    return (
        <div>
            {flights}
        </div>
    )
  }
}

Answer 1

关键属性需要位于最外层元素上。将Tensorflow从key标记移至li。 docs进一步解释。

div