代码之家 › 专栏 › 技术社区 › Alyona

在React中使用map时如何消除key错误?

array-map key reactjs

Alyona · 技术社区 · 5 年前

每个人都知道这个错误: Each child in a list should have a unique "key" prop 但是如果我有一个字符串数组,我想在我的段落中呈现它呢

return(
    <p>
    {array.map(string => {
        return <>{string}<br/></>
    })}
    </p>
)

正如你所看到的,我实际上只返回带有 <br/> 最后,我没有地方也不需要钥匙。我怎样才能摆脱这个错误?把每句话都写进 <span>

1 回复 | 直到 5 年前

Dean James 5 年前

当React呈现更改时,在将更改推送到DOM之前,它使用 virtual DOM

当呈现子元素的集合时,假设 <li> 当一个独特的 key 未提供道具。它之所以需要这个道具是因为它可以执行我上面提到的智能决策。

prop作为字符串,因为不建议对其使用索引:

return(
  <p>
    {array.map((string, index) => <React.Fragment key={index.toString()}>{string}<br/></React.Fragment>)}
  </p>
);

alefseen 5 年前

您可以使用map index作为段落的键,如下所示:

return(
    <p>
    {array.map((string,index)=> {
        return <React.fragment key={index}>{string}<br/></React.fragment>
    })}
    </p>
)

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前