Reactjs 反应-为什么我会得到“反应”；数组或迭代器中的每个子级都应具有唯一的；“关键”；“道具”；如果我有一个键（索引），是否会出错？

我有一个关于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>
    )
  }
}

[{
目的地：[“AMS”、“BCN”、“BOS”、“BRU”、“LAS”、“LAX”、…]，
原始位置：[“肯尼迪”、“LGA”、“EWR”]，
货币：[“USD”、“USD”、“USD”、“USD”、“USD”、“USD”、“USD”、…”，
...
}]
类应用程序扩展了React.Component{
render（）{
const flights=this.props.flightData.map（（flighti）=>{
返回(

航班从：{Flight.OriginLocation}出发

)
})
返回(
{航班}
)
}
}

键属性需要位于最外面的元素上。将

键

从

li

标记移动到

div

。进一步解释

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

const flights=this.props.flightData.map（（flighti）=>{
返回(

航班从以下地点起飞：{Flight.OriginLocation}

)
})

键属性需要位于最外面的元素上。将

键

从

li

标记移动到

div

。进一步解释

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

const flights=this.props.flightData.map（（flighti）=>{
返回(

航班从以下地点起飞：{Flight.OriginLocation}

)
})

Move

key={i}

到

。从
map
返回的顶级组件应该具有
键
prop.Move
key={i}
到
。从
映射返回的顶级组件应具有
键
属性。非常感谢！您能解释一下为什么键必须转到div并且不能是insight li或ul元素吗？谢谢！React使用键来识别哪些项已更改、添加或删除。在属性上没有
键
属性e> div
，React将无法识别每个
div
元素。如果每个
div
都是可识别的，那么每个子元素也将是可识别的（在这种情况下，
ul
和
li
元素）。如果您想更深入地了解这一点，您可以阅读。非常感谢！您能解释一下为什么密钥必须转到div，并且不能是insight li或ul元素吗？谢谢！React使用密钥来标识哪些项已更改、添加或删除。如果
div
上没有
密钥
属性，React将无法识别fy每个
div
元素。如果每个
div
都是可识别的，那么每个子元素也将是可识别的（在本例中为
ul
和
li
元素）。如果您想更深入地了解这一点，可以阅读相关内容。