React 正在复制我的对象值并给我一个警告:列表中的每个子项都应该有一个唯一的 "key" 道具
React is duplicating my object value giving me a Warning: Each child in a list should have a unique "key" prop
我正在尝试为网站制作导航栏,它给我提示“警告:列表中的每个子项都应该有一个唯一的“关键”道具。”在我的 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
所以您的问题不会出现在您提供的任何一个组件中,而是出现在您的“Land”组件中。 (查看Land的render方式)
我正在尝试为网站制作导航栏,它给我提示“警告:列表中的每个子项都应该有一个唯一的“关键”道具。”在我的 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
所以您的问题不会出现在您提供的任何一个组件中,而是出现在您的“Land”组件中。 (查看Land的render方式)