显示 API 数据时出错。 警告：列表中的每个孩子都应该有一个唯一的“key”道具

Question

我正在使用 ReactJS 开发货币转换器应用程序。 该程序是关于从一种货币转换为另一种货币。 该应用程序有一个表单，其中包含一个带有提交按钮的字段。 此外，它还具有初始货币“10 美元”作为默认值。

当用户在字段中输入货币的缩写（例如：KRW）并单击提交按钮时。 表格下方会有一个结果，显示从美元转换为韩元的结果。 如果用户想要添加更多货币，“KRW”转换结果下方将显示另一种选择货币。

当我尝试制作函数以显示用户在字段中提交货币缩写时的结果时。

这是我在 chrome 控制台中打开时的错误：

    index.js:1375 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `CurrencyList`. See https://.. for more information.
    in Currency (at App.js:249)
    in CurrencyList (at App.js:159)
    in div (at App.js:127)
    in div (at App.js:123)
    in App (at src/index.js:7)

这是我在 App.js:249 中相关的代码

class CurrencyList extends React.Component {
    render() {
        const p = this.props;
        return (
            <div className="currencyList">
                <span className="currencyListText">&#x3C;CurrencyList/&#x3E;<br/></span>
                {p.currencyInfoArray.map(currencyInfo => <Currency key={currencyInfo.id} {...currencyInfo}/>)} //this is App.js:249

            </div>
        );
    }
}

关于这一点，我该如何解决这个问题，以便列表中的每个孩子都有一个唯一的“关键”道具？

Answer 1

有一些常见的解决方案：

1. 使用数据库 ID

当您从数据库中获取数据时，最好使用它们的唯一 id，因此您不需要生成它。在此示例中，如果currencyInfoArray 来自数组中的表，只需从后端获取 id 并将其提供给 reactjs。

2. 生成唯一 ID

有一些模块可以为你做这件事： uuid

3. 使用数组的 id：

像这样：

                {p.currencyInfoArray.map((currencyInfo,idx) => <Currency key={idx} {...currencyInfo}/>)} //this is App.js:249

最后使用 chrome 中的 React Developer Tools 检查您的 ID，并检查一切是否正确。 随时在评论中提出更多问题