在文章上反应地图集键
在文章上反应地图集键
提问于 2021-02-08 15:00:58
我正在创作一些文章。使用React框架。我是通过地图函数设置文章的键，我得到了一个错误“列表中的每个子元素都应该有一个唯一的”键“支柱”。
import React, { useState } from "react";
import { AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
const Question = ({ data }) => {
const [IsPhidden, SetIsPhidden] = useState(true);
return (
<>
{data.map((item) => {
return (
<>
<article key={item.id} className='question'>
<header>
<h4>{item.title}</h4>
<button
onClick={() => SetIsPhidden(!IsPhidden)}
className='btn'
>
{IsPhidden ? <AiOutlinePlus /> : <AiOutlineMinus />}
</button>
</header>
{!IsPhidden && <p>{item.info} </p>}
</article>
</>
);
})}
</>
);
};
export default Question;
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-08 15:06:34
这是因为映射的直接子元素是这个组件：<>，而不是<article>。因此，“关键”支柱应该在React片段组件中。您可以做的另一件事(这是我的建议)是删除该片段，因为它是不必要的。就像这样：
import React, { useState } from "react";
import { AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
const Question = ({ data }) => {
const [IsPhidden, SetIsPhidden] = useState(true);
return (
<>
{data.map((item) => {
return (
<article key={item.id} className='question'>
<header>
<h4>{item.title}</h4>
<button
onClick={() => SetIsPhidden(!IsPhidden)}
className='btn'
>
{IsPhidden ? <AiOutlinePlus /> : <AiOutlineMinus />}
</button>
</header>
{!IsPhidden && <p>{item.info} </p>}
</article>
);
})}
</>
);
};
export default Question;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66104050
复制相关文章
相似问题
腾讯云开发者
