列表中的每个孩子都应该有一个独特的"key"道具。警告

Question

我给每个项目一个唯一的键，但它仍然显示每个子列表应该有一个唯一的键;道具。

<FormControl className="registerInputs">
  <InputLabel htmlFor="name-multiple">Country</InputLabel>
  <Select
    value={country}
    placeholder="Country"
    input={<Input id="name-multiple" />}
    onChange={(e) => selectCountryHandler(e.target.value)}
  >
    {!!countryArr?.length &&
      countryArr.map(({ label, value }) => (
        <MenuItem key={label} value={value}>
          {label}
        </MenuItem>
      ))}
  </Select>
</FormControl>;

Answer 1

正如我在代码中看到的，您已经将标签分配为键。我想知道是否有不止一个类似的标签给你一个错误。我建议你使用

countryArr.map(({ label, value }, id) => (
            <MenuItem key={id} value={value}>
              {label}
            </MenuItem>
          ))

请尝试一下，并告诉我它是否有效。