Javascript 无法读取属性'；地图'；来自axios请求的未定义铁路超高地图数据

在react中，我试图从我创建的API调用中获取数据。控制台打印出正确的响应，即用户名列表，但映射对我不起作用。任何建议都是有益的

import React, { useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";

const CreateProject = () => {
  const [loading, setLoading] = React.useState(true);
  const { handleSubmit, register, errors } = useForm();
  const [value, setValue] = React.useState("Choose option");
  const [items, setItems] = React.useState([
    { label: "Loading", value: "Loading" }
  ]);
  const onSubmit = values => {
    console.log(values);
  };
  useEffect(() => {
    // initialise as false
    let unmounted = false;
    async function getUsers() {
      const res = await axios.get(
        "http://localhost:3000/api/findUser/findUser"
        // Api for finding user
      );
      const body = await res.data;
      console.log(res.data);
      // check state is still false beofre state is set
      if (!unmounted) {
        setItems(
          body.res.map(({ name }) => ({
            label: name,
            value: name
          }))
        );
        setLoading(false);
        // setLoading allows change to option - data displayed
      }
    }
    getUsers();
    return () => {
      unmounted = true;
    };
  }, []);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        placeholder="ProjectName"
        name="ProjectName"
        ref={register({ required: true, maxLength: 20 })}
      />
      <input
        type="text"
        placeholder="Project Details"
        name="Project Detail"
        ref={register({ required: true, maxLength: 50 })}
      />
      <select
        disabled={loading}
        value={value}
        onChange={e => setValue(e.currentTarget.value)}
      >
        {items.map(({ label }) => (
          <option key={value} value={value}>
            {label}
          </option>
        ))}
      </select>
      {errors.search && <p>No user found</p>}
      <input type="submit" />
    </form>
  );
};

export default CreateProject;

import React，{useffect}来自“React”；
从“react hook form”导入{useForm}；
从“axios”导入axios；
const CreateProject=（）=>{
常量[loading，setLoading]=React.useState（true）；
const{handleSubmit，register，errors}=useForm（）；
const[value，setValue]=React.useState（“选择选项”）；
const[items，setItems]=React.useState([
{标签：“加载”，值：“加载”}
]);
const onSubmit=值=>{
console.log（值）；
};
useffect（（）=>{
//初始化为false
让unmounted=false；
异步函数getUsers（）{
const res=等待axios.get(
"http://localhost:3000/api/findUser/findUser"
//用于查找用户的Api
);
const body=等待恢复数据；
console.log（res.data）；
//检查状态仍然为false，但已设置恢复状态
如果（！已卸载）{
设置项(
body.res.map（（{name}）=>({
标签：名称，
值：name
}))
);
设置加载（假）；
//setLoading允许更改选项-显示的数据
}
}
getUsers（）；
return（）=>{
未安装=正确；
};
}, []);
返回(
setValue（e.currentTarget.value）}
>
{items.map（{label}）=>(
{label}
))}
{errors.search&&未找到用户
}
);
};
导出默认项目；

---

我收到的错误似乎在setItems处的body.res.map附近-“Uncaught（in promise）TypeError:无法读取未定义的属性“map”

您实际上是在控制台上记录除映射之外的其他变量。 如果您所记录的内容是正确的，那么您的

setItems（）

应该是：

setItems(
res.data.map（{name}）=>({
标签：名称，
值：name
}))
)

实际上，控制台记录的是其他变量，而不是映射的变量。 如果您所记录的内容是正确的，那么您的

setItems（）

应该是：

setItems(
res.data.map（{name}）=>({
标签：名称，
值：name
}))
)

const body=wait res.data

没有理由写入

wait

，因为

res.data

不是承诺

下面是它应该是怎样的

const body=res.data

在这个块中，你只需要映射身体

setItems(
   body.map(({ name }) => ({
       label: name,
       value: name
          }))
        );

---

const body=wait res.data

没有理由写入

wait

，因为

res.data

不是承诺

下面是它应该是怎样的

const body=res.data

在这个块中，你只需要映射身体

setItems(
   body.map(({ name }) => ({
       label: name,
       value: name
          }))
        );

---

使用承诺链而不是等待，使事情更顺利

 async function getUsers() {
        axios.get("http://localhost:3000/api/findUser/findUser")
            .then((res) => {
                console.log(res.data);
                if (!unmounted) {
                    setItems(
                        res.data.map(({
                            name
                        }) => ({
                            label: name,
                            value: name
                        }))
                    );
                    setLoading(false);
                    // setLoading allows change to option - data displayed
                }


            })
            .catch((error) => console.log(error));

    }

---

使用承诺链而不是等待，使事情更顺利

 async function getUsers() {
        axios.get("http://localhost:3000/api/findUser/findUser")
            .then((res) => {
                console.log(res.data);
                if (!unmounted) {
                    setItems(
                        res.data.map(({
                            name
                        }) => ({
                            label: name,
                            value: name
                        }))
                    );
                    setLoading(false);
                    // setLoading allows change to option - data displayed
                }


            })
            .catch((error) => console.log(error));

    }

---

所以“控制台打印出正确的响应，即用户名称列表”意味着

res.data

是一个数组，对吗？然后像

body.res

一样使用它，这基本上意味着

res.data.res

。这是没有意义的，因为你说

res.data

是一个数组。你能为我们分享

res.data

值，看看它是否包含另一个

res

属性吗？所以“控制台打印出正确的响应，即用户名单”意味着

res.data

是一个数组，对吗？然后像

body.res

一样使用它，这基本上意味着

res.data.res

。这是没有意义的，因为你说

res.data

是一个数组。你能为我们分享

res.data

值，看看它是否包含另一个

res

属性吗？谢谢！现在唯一能阻止它的是“列表中的每个孩子都应该有一个唯一的”键“道具”，这可能是需要检查的渲染方法。请给出一个例子？”警告：列表中的每个孩子都应该有一个唯一的“键”道具。这是我收到的警告，但我仍然可以使用这些值。我相信这就是我在返回中选择类型中迭代items.map的方式。尝试设置key={label}谢谢！现在唯一能阻止它的是“列表中的每个孩子都应该有一个唯一的”键“道具”，这可能是需要检查的渲染方法。请给出一个例子？”警告：列表中的每个孩子都应该有一个唯一的“键”道具。这是我收到的警告，但我仍然可以使用这些值。我相信这就是我在return.try setting key={label}中的select类型中迭代items.map的方式