关于使用Keys
文章目录

tags: react, keys, unique, prop

React: 关于使用Keys来索引列表.md

经常会遇见这样的警告:
Warning: Each child in an array or iterator should have a unique “key” prop.


一般将key放置到列表class里面进行赋值, 而不是放到item里面进行赋值

最好放在ul循环生成li的时候给li添加key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function ListItem(props) {
  const value = props.value;
  return (
  
    // Wrong! There is no need to specify the key here
    // 当然在这儿也获得不到key值
    <li key={value.toString()}>
      {value}
    </li>
    
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
  
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
    
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

正确用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}