Each child in an array or iterator should have a unique “key” prop. Check the render method of `Tabl

Each child in an array or iterator should have a unique “key” prop. Check the render method of `Table Cell`

In the process of using ant, I believe many people will encounter this error

To solve this problem, we need to follow only one principle: set the key value according to different scenarios

In table: you need to set rowkey. If there is no ID in datasource, you need to set the value of rowkey to be unique

You also need to set the key value in option, for example, there is a piece of data

const menuItem = [
  {
    value:'0',
    text:'111'
  },
  {
    value:'1',
    text:'222'
  },
  {
    value:'2',
    text:'333'
  },
  {
    value:'3',
    text:'444'
  },
  {
    value:'4',
    text:'555'
  },
  {
    value:'5',
    text:'666'
  },
  {
    value:'6',
    text:'777'
  },
];

When doing a loop, you need to set the key value, otherwise an error will be reported. You can do this

<Select style={{ width: 80 }} onChange={this.fatherSelectChange.bind(this)}>
            {menuItem.map((item,index) =>{
              return(
                <Option key={index} value={item.value}>{item.text}</Option>
              )
            })}
          </Select>

Similar Posts: