Javascript map不是功能组件中的函数

我有一个文本框，在其中我将数组项设置为文本框，并将其用作下拉列表。我的代码可以工作，我可以在下拉列表中看到项目，但是当我单击除第一个项目之外的任何其他项目时，我会得到错误组。map不是一个函数。 我将数组从API设置为我的组，然后尝试将需要的项映射到文本框中。 请查看下面我的代码，并帮助我修复它

我在这里将状态设置为空数组

const [groups, setGroups] = useState([]);

const handleChange = event => {
setGroups({
  ...groups,
  [event.target.name]: event.target.value
});
};

axios
  .post('http://', formData, config)
  .then((response) => {
    console.log(response.data)
    setGroups(response.data);
  })
  .catch((error) => {
    console.log(error.response);
  });
}, []);

          <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={groups.name}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

我在这里处理API调用

const [groups, setGroups] = useState([]);

const handleChange = event => {
setGroups({
  ...groups,
  [event.target.name]: event.target.value
});
};

axios
  .post('http://', formData, config)
  .then((response) => {
    console.log(response.data)
    setGroups(response.data);
  })
  .catch((error) => {
    console.log(error.response);
  });
}, []);

          <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={groups.name}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

我使用要在此处下拉列表中显示的数据进行渲染

const [groups, setGroups] = useState([]);

const handleChange = event => {
setGroups({
  ...groups,
  [event.target.name]: event.target.value
});
};

axios
  .post('http://', formData, config)
  .then((response) => {
    console.log(response.data)
    setGroups(response.data);
  })
  .catch((error) => {
    console.log(error.response);
  });
}, []);

          <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={groups.name}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

{groups.map（选项=>(
{option.name}
))}

这是因为当您尝试映射到您的状态时，axios尚未完成请求，并且您的状态尚未更新。请在地图附近尝试以下代码：

{groups && groups.map(option => (
     <option
      key={option.id}
     >
       {option.name}
     </option>
 ))}

{groups&&groups.map（选项=>(
{option.name}
))}

---

仅当

组

存在时，映射才会遍历数组

尝试添加新的状态变量以存储所选组

const [selected, setSelected] = useState();

您的handleChange函数将变成

const handleChange = event => {
  setSelected(event.target.value);
};

您的TextField组件将更改其值以匹配相应的状态变量：

            <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={selected}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

{groups.map（选项=>(
{option.name}
))}

您使用了

组。name

作为值。

groups

是一个对象吗？组必须是一个数组才能有映射方法是的groups是一个数组。我将很快更新我的问题，介绍如何从api将组设置为数组数据。您是否正在将

groups

设置为

handleChange

函数中的对象？Hello@soulLess这正是我正在做的。请检查我的代码。非常详细的解释。非常感谢你对我的帮助。因此，当TextField发生更改时，我再次将组设置为一个对象，这就是导致.map方法失败的原因。非常感谢。很酷，没问题：）