React 正在复制我的对象值并给我一个警告：列表中的每个子项都应该有一个唯一的 "key" 道具

Question

我正在尝试为网站制作导航栏，它给我提示“警告：列表中的每个子项都应该有一个唯一的“关键”道具。”在我的 props.dropList.map 里面我有两个文件：

NavigationItems.js -> 我渲染导航栏的地方

const NavigationItems = () => {
  const projectDropdown = [
    { id: 0, value: "architecture" },
    { id: 1, value: "land" },
    { id: 2, value: "design" },
    { id: 3, value: "list" },
  ];
  const officeDropdown = [
    { id: 4, value: "contact" },
    { id: 5, value: "team" },
  ];

  return (
    <div>
      <ul className={styles.NavigationItems}>
        <NavigationItem
          link={`/projects`}
          name="projects"
          dropList={projectDropdown}
        />
        <NavigationItem link={`/news`} name="news" exact />
        <NavigationItem
          link={`/office`}
          name="office"
          dropList={officeDropdown}
        />
      </ul>
    </div>
  );
};

export default NavigationItems;

NavigationItem.js -> 我使用地图函数的地方

const NavigationItem = (props) => {
  let i = 0;
  return (
    <li className={styles.NavigationItem}>
      <NavLink to={props.link} activeClassName={styles.active}>
        {props.name}
      </NavLink>
      {props.dropList && (
        <div className={styles.DropdownItems}>
          <ul className={styles.DropdownItem}>
            {props.dropList.map((drop) => {
              console.log("i " + i);
              console.log("id " + drop.id);
              console.log("value " + drop.value);
              i++;
              return (
                <li key={drop.id}>
                  <NavLink
                    exact
                    to={`${props.link}/${drop.value}`}
                    activeClassName={styles.active}
                  >
                    {drop.value}
                  </NavLink>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </li>
  );
};

export default NavigationItem;

所以发生的是代码循环两次以复制键值。它应该只循环一次。我不知道为什么它会循环两次，我只映射一次我的值。以供参考 this is what my console shows when I click my links

Answer 1

所以您的问题不会出现在您提供的任何一个组件中，而是出现在您的“Land”组件中。（查看Land的render方式）

React 正在复制我的对象值并给我一个警告：列表中的每个子项都应该有一个唯一的 "key" 道具

React is duplicating my object value giving me a Warning: Each child in a list should have a unique "key" prop

javascript

reactjs

key

prop