React.js 如何解决遇到两个孩子有相同的 key React.js答案

【问题标题】：How to Resolve Encountered two children with the same key React.jsReact.js 如何解决遇到两个孩子有相同的 key React.js
【发布时间】：2021-07-15 09:26:35
【问题描述】：

无法对“遇到两个具有相同密钥的孩子”错误进行排序。关于这个问题，我已经经历了一些线程，但似乎没有一个答案适用于我的情况。我想避免使用索引以及不鼓励使用它。

useEffect(() => {
const Items = locations.map((location) => {
  return {
    header: location.description,
    key: location.code,
    content: location.phoneNumber,
    image: {
      as: Avatar,
    },
    code: location.code,
  };
});

【问题讨论】：

标签： reactjs key

【解决方案1】：

useEffect(() => {
const Items = locations.map((location) => {
  return {
    header: location.description,
    key: location.code,
    content: location.phoneNumber,
    image: {
      as: Avatar,
    },
    code: location.code,
  };
});

key location.code 不是唯一的，被多次使用，你需要唯一的key。修复可能是这样的：

useEffect(() => {
const Items = locations.map((location,index) => {
  return {
    header: location.description,
    key: index,
    content: location.phoneNumber,
    image: {
      as: Avatar,
    },
    code: location.code,
  };
});

但最好的方法是唯一的 id。也许 location.id 如果可用的话..

【讨论】：

【解决方案2】：

位置对象中是否有唯一的 id？在这种情况下，这是完美的解决方案。不鼓励使用索引，但可能会与您的 location.code 组合并连接。

useEffect(() => {
const Items = locations.map((location,index) => {
  return {
    header: location.description,
    key: index + location.code,
    content: location.phoneNumber,
    image: {
      as: Avatar,
    },
    code: location.code,
  };
});

【讨论】：