Question

这是我的渲染

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

我正在使用唯一密钥，但仍收到警告

警告：数组或迭代器中的每个子代均应具有唯一的“键” 道具。

Answer 1

我为你找到了这个。

How to create unique keys for React elements?

似乎您需要退还钥匙。或者，如前所述，npm软件包已经存在以声明唯一密钥。

Answer 2

这不是您返回Component或将关键道具（或其他道具...）传递给它的方式

<ul>
    {products.map((product, index) => (
        <Product key={index} product={product} />
    ))}
</ul>

https://reactjs.org/docs/components-and-props.html#composing-components

Answer 3

您没有将子元素传递给ul

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

Answer 4

我看到了：

.method public hidebysig static float64  Sin(float64 a) cil managed internalcall
{
  .custom instance void System.Security.SecuritySafeCriticalAttribute::.ctor() = ( 01 00 00 00 ) 
  .custom instance void __DynamicallyInvokableAttribute::.ctor() = ( 01 00 00 00 ) 
} // end of method Math::Sin

这：

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')
);

做您想完成的事情。

如果我不得不猜测（我对此解释没有很高的信心），我会怀疑React需要在子组件上使用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') );道具以使其能够快速运行确定状态更改时需要重新呈现哪些元素。因此，除非实际将其呈现为UI，否则传递key道具实际上不会取得任何效果。上面的两个示例分别是在key和<p>中渲染虚拟DOM的密钥。

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

4 个答案: