Javascript 在反应/材料UI中使用贴图填充选择时出现问题_Javascript_Reactjs_Material Ui

Javascript 在反应/材料UI中使用贴图填充选择时出现问题

javascript reactjs material-ui

Javascript 在反应/材料UI中使用贴图填充选择时出现问题,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我试图用国家列表填充材质的UI，如下所示： 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/Me

我试图用国家列表填充材质的UI，如下所示：

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;

下面是

data.js

文件的示例：

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

我做错了什么

编辑：将

键

从

代码

更改为

索引

，仍然无效。

遇到两个具有相同键的子菜单项是一个警告，说明您的两个菜单项具有相同的键，因为您使用国家代码作为键，这可能是真的。我建议将数组的索引用作键。第二，你必须带着地图回来。所以应该是这样的

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

countries.map（（索引、代码、名称）=>{
返回(
{name}
)})

试试这个，应该可以走了。

遇到两个孩子使用相同的键是一个警告，提示您的两个菜单项具有相同的键，因为您使用国家代码作为键，这可能是真的。我建议将数组的索引用作键。第二，你必须带着地图回来。所以应该是这样的

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

countries.map（（索引、代码、名称）=>{
返回(
{name}
)})

试试这个，应该可以开始了。

似乎您打算对数组中的每个对象进行分解，但却错过了大括号：

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

似乎您打算对数组中的每个对象进行分解，但却错过了大括号：

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

这实际上是错误使用的

map

方法

传递到

映射

中函数的参数按顺序显示

项

，

索引

，

数组

。在您的例子中，

countries.map（（code，name，index）=>{…}）

，

code

在数据数组中显示单个项，例如

{code:“AD”，name:“andror”}

，

名称

显示数据数组的索引，

索引

显示数据数组本身。您得到相同的键错误是因为它们是相同的值-数据数组

因此，按照您的目的编写映射函数的正确方法应如下所示：

countries.map（{code，name}，index）=>(
{name}
))

整个文件应如下所示：

从“React”导入React；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/Select”导入选择；
从“@material ui/core/MenuItem”导入菜单项；
从“/data”进口国家；
const simpleCountrySelect=props=>{
返回(
国家
{countries.map（{code，name}，index）=>(
{name}
))}
);
};
导出默认的simpleCountrySelect；

这实际上是

map

方法使用的错误

传递到

映射