Проблема с использованием карты для заполнения выбора в интерфейсе React / Material

Question

Я пытаюсь заполнить пользовательский интерфейс материала списком стран, например так:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import countries from "./data";

const simpleCountrySelect = props => {
  return (
    <>
      <FormControl>
        <InputLabel id="countrySelectLabel">Country</InputLabel>
        <Select labelId="countrySelectLabel" id="countrySelect" value=''>
          {countries.map((code, name, index) => (
            <MenuItem key={index} value={code}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </>
  );
};

export default simpleCountrySelect;

Неконтролируемый компонент для краткости. Но я получаю следующую ошибку:

Encountered two children with the same key, `.$.$.$[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Вот пример файла data.js:

export default [
  { code: "AD", name: "Andorra" },
  { code: "AE", name: "United Arab Emirates" },
  { code: "AF", name: "Afghanistan" },
  { code: "AG", name: "Antigua and Barbuda" }
];

Что я здесь не так делаю?

РЕДАКТИРОВАТЬ: изменено key с code на index, все еще ничего.

Answer 1

Похоже, вы хотели уничтожить каждый объект в массиве, но пропустили фигурные скобки:

countries.map(({code, name}) =>

Answer 2

Это фактически map ошибка, использованная методом.

Параметры, передаваемые в функцию в map, присутствуют item, index, array в порядке. В вашем случае countries.map((code, name, index) => {...}), code представляют отдельный элемент в массиве данных, например {code: "AD", name: "Andorra"}, name представляют индекс массива данных, index представляют сам массив данных. Вы получили ту же самую ключевую ошибку, потому что они имеют одно и то же значение - массив данных.

Итак, правильный способ написания функции карты в вашей цели должен быть следующим:

countries.map(({ code, name }, index) => (
  <MenuItem key={index} value={code}>
    {name}
  </MenuItem>
))

Весь файл должен быть таким, как показано ниже:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import countries from "./data";

const simpleCountrySelect = props => {
  return (
    <>
      <FormControl>
        <InputLabel id="countrySelectLabel">Country</InputLabel>
        <Select labelId="countrySelectLabel" id="countrySelect" value=''>
          {countries.map(({code, name}, index) => (
            <MenuItem key={index} value={code}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </>
  );
};

export default simpleCountrySelect;

Answer 3

Обнаружение двух дочерних элементов с одним и тем же ключом является предупреждением о том, что два элемента вашего меню имеют одинаковый ключ, так как вы используете код страны в качестве ключа, это также может быть правдой. Я бы предложил что-то вроде индекса вашего массива для использования в качестве ключа. Во-вторых, вы должны вернуться на карту. Так что это должно быть что-то вроде

countries.map((index, code, name) => {
return(
<Menu.Item key={index} value={code}>
   {name}
</Menu.Item>
)})

Попробуйте, это должно быть хорошо, чтобы go.