时间戳

首页 > 解决方案 > 为什么我收到没有唯一密钥的警告？

reactjs - 为什么我收到没有唯一密钥的警告？

问题描述

这是我的渲染

render() {
    let products = this.state.products  
    return (
      <ul>
        {products.map((product, index) => Product({ key: index, product: product }))}          
      </ul>
    );
  }

我正在使用唯一键，但仍然收到警告

警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。

标签： reactjs

解决方案

我看到了这个：

function Product(props) {
  return (
     <p key={props.key}>{props.product}</p> 
  )
}

function Main(props) {
  let products = [ "foo", "bar", "baz"];
  return (
    <ul>
      {products.map((product, index) => Product({key: index, product: product }))}        
    </ul>
  );
}

ReactDOM.render(
  <Main></Main>,
  document.getElementById('example')
);

和这个：

function Product(props) {
  return (
     <p>{props.product}</p> 
  )
}

function Main(props) {
  let products = [ "foo", "bar", "baz"];
  return (
    <ul>
      {products.map((product, index) => (
        <li key={index}>
          {Product({product: product })}
        </li>
      ))}    
    </ul>
  );
}

ReactDOM.render(
  <Main></Main>,
  document.getElementById('example')
);

做你想要完成的事情。

如果我不得不猜测（我对这个解释没有很高的信心），我会怀疑 React 需要key在子组件上使用一个 prop，以便它可以快速确定在状态更改时需要重新渲染哪些元素。因此，传递一个keyprop 并不会真正实现任何效果，除非它实际呈现为 UI。<p>上面的两个示例分别是在和中渲染虚拟 DOM 的键<li>。

推荐阅读