3. 关于unique "key" prop的报错

关于unique "key" prop的报错

  • 梵
    administrators

    关于unique "key" prop的报错，大家估计都很熟悉。React的报错信息也很清晰明朗：

    Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.

    这个错误通常是发生在使用map来循环render一个组件时，没有给子元素添加“key”。例如：

    {
  props.data.map(({ currency, rate, name }) => (
    <Table.Row>
      <Table.Cell>{currency}</Table.Cell>
      <Table.Cell>{name}</Table.Cell>
      <Table.Cell>{rate}</Table.Cell>
    </Table.Row>
  ))
}

    大家注意到：这里我们没有给<Table.Row>加上unique的key。解决这个问题很容易。在这个例子里：currency刚好是个字符串类型，并且是unique的，所以把它当key用，加上就解决问题了，即：<Table.Row key={currency}>

    但是在有些情况下，React并不会告诉你这个错误发生在哪一个组件上，那么就有点头大了。比如下面这个例子：

    return [
  <RateTable data={this.state.data} />,
  <Buttons {...this.state} />
];

    从React V16开始，我们可以return多个子元素，而不用像以前一样，这些子元素一点要被包裹在一个node里返回。其实这就Array的概念，所以React也检查unique key。但是这两个元素没有相关性，加key有点别扭。这里建议用以下的写法：

    return （
<>
  <RateTable data={this.state.data} />,
  <Buttons {...this.state} />
</>
);

    用<>比用<div>好，因为它不会引入多余的<div>。

    最有要重申一下：这个key在同一个node(父节点)下，一点要是unique的。不然的话，会造成React的render混乱！！！也就是说你不加key，可能只是一个warning，加的不对，页面显示错误，加还不如不加。🤡

    0