Javascript 类型错误：can'；t访问属性“；“地图”；，data.record未定义

我尝试使用reactjs、NodeJS和mysql数据库添加和更新数据。这是我的密码

对于连接，我在节点js中创建了restapi

连接已成功实现

这是我的前端代码

用于向数据库添加数据

const App1 = () =>{

const [data,setData] = useState({
    name: '',
    location: '',
    record: [],
    showAlert: false,
    alertMsg: "",
    alertType: "success",
    id:"",
    update: false,
 });

useEffect(()=>{
  fetchData(); 
},[]);

// const [location,setLocation] = useState({location: ''});

const InputEvent = (event) =>{
    const {name, value} = event.target;
    setData((preValue)=>{
        return{
            ...preValue,
            [name]: value,
        };
    });
};

    const addData = () =>{
    var myHeaders = new Headers();
   myHeaders.append("Content-Type","application/json")

   var body = JSON.stringify({name: data.name, location: data.location});

   fetch("http://localhost:8000/api/create",{
       method: "POST",
       headers: myHeaders,
       body: body
   }).then((res)=>res.json())
    .then((result)=>{
        console.log(result);
        
        setData({
            name:"",
            location: "",
            showAlert: true,
            alertMsg: result.res,
            alertType: "success",
            record: result.res,
        });
    });
};

用于从数据库中获取所有记录

    const fetchData = () =>{
    var headers = new Headers();
    headers.append("Content-Type","application/json");

    fetch("http://localhost:8000/api/view",{
        method: "GET",
        headers: headers,
}).then((res)=>res.json())
.then((result)=>{
    console.log("result",result);

    setData({
        record: result.res,
    })
}).catch((err)=> console.log("Error",err))};

对于在本例中编辑数据库中的数据，我面临编辑数据的问题，因为当单击编辑按钮时，数据库中的数据被更新，但在前端发生错误=“无法访问属性“map”，data.record未定义

编辑功能代码

const editTask = (id) =>{
fetch("http://localhost:8000/api/view/"+id,{
    method: "GET",
}).then((res)=>res.json())
.then((result)=>{
    console.log(result);

    setData({
        id: id,
        update: true,
        record: result.res,
        name: result.res[0].name,
        location: result.res[0].location,
    });
}).catch((err)=>console.log("Error",err));};

现在来更新部分

这里是更新函数，出现相同错误=“TypeError:无法访问属性“map”，data.record未定义

更新函数如下

 const updateTask = () =>{
  var myHeaders = new Headers();
  myHeaders.append("Content-Type","application/json");

  var body = JSON.stringify({id: data.id, name: data.name, location: data.location});
  fetch("http://localhost:8000/api/update",{
      method: "PUT",
      headers: myHeaders,
      body: body
  }).then((res)=>res.json())
  .then((result)=>{

    console.log(result);
      setData({
          showAlert: true,
          alertMsg: result.res,
          alertType: "success",
          update: false,
          id: "",
          name: "",
          location: "",
      });
          fetchData();
  }).catch((err)=>console.log("Error",err));};

现在返回我编写map方法代码的部分

data.record.map((record)=>{
                            return(
                                
                                <tr>
                                    <td>{record.id}</td>
                                    <td>{record.name}</td>
                                    <td>{record.location}</td>

                                    <td>
                                       <Button variant="info"onClick{()=>editTask(record.id)}>Edit</Button>
                                    </td>

                                    <td>
                                        <Button variant="danger">Delete</Button>
                                    </td>
                                </tr>
                            );

data.record.map（（record）=>{
返回(
{record.id}
{record.name}
{record.location}
editTask（record.id）}>Edit
删除
);

---

请帮助我并感谢您

更新后传递给setData的对象没有“记录”数据。因此，它将变得未定义

setData({
  showAlert: true,
  alertMsg: result.res,
  alertType: "success",
  update: false,
  id: "",
  name: "",
  location: "",
});

假设更新api返回更新的数据，则需要使用更新的数据更新“记录”数据

fetch("http://localhost:8000/api/update", {
  method: "PUT",
  headers: myHeaders,
  body: body
})
.then((res) => res.json())
.then((result) => {
  setData({
    showAlert: true,
    alertMsg: result.res,
    alertType: "success",
    update: false,
    id: "",
    name: "",
    location: "",
    record: data.record.map(item => (item.id === result.id ? result : item)
  });
});

---

您在哪里使用该

数据.record.map

？请共享整个文件，而不是其中的一部分，因为最重要的部分是单独的…您正在更改您的状态结构。首先，它是一个包含所有数据的状态，但您的编辑和更新操作将您的状态集合从api更改为单个记录。