Javascript 反应：axios的PUT值为空

我有一个简单的列表，可以通过API使用axios获得。 每个元素都是可修改的输入，有自己的更新按钮

更改输入数据后，在执行PUT请求时，

console.log（test）返回空值

我检查了
console.log（newList）
这是列表的数组，列表中确实发生了变化的数据，但它们似乎无法发送到服务器

注意：API只是用于测试，PUT方法可能不起作用，但至少应该发送控制台中的值

注2：我不知道如何在url中放置列表项的
id
，这样您可能会遇到错误您可以尝试使用1、2或3来代替测试


import React，{useState，useffect}来自“React”；
从“axios”导入axios；
导出默认值（）=>{
const[list，setList]=React.useState（[]）；
const[name，setName]=React.useState（“”）；
const[description，setDescription]=React.useState（“”）；
const[city，setCity]=React.useState（“”）；
//从API获取初始列表
useffect（（）=>{
axios
.get（“https://6092374385ff5100172122c8.mockapi.io/api/test/users")
。然后（（响应）=>{
setList（response.data）；
控制台日志（响应）；
})
.catch（（err）=>console.log（err））；
}, []);
//onUpdate更新API中的数据
const onUpdate=（e）=>{
e、 预防默认值（）；
常数测试={
姓名:姓名,，
描述：描述，
城市：城市
};
控制台日志（测试）；
//axios请求将数据放在API上
axios
.放(
"https://6092374385ff5100172122c8.mockapi.io/api/test/users“+id，
测试
)
。然后（（res）=>{
警惕（“成功”）；
控制台日志（res）；
})
.catch（（错误）=>{
console.log（错误）；
});
//更新后，axios请求GET从数据库获取新的修改列表
axios
.get（“https://6092374385ff5100172122c8.mockapi.io/api/test/users")
。然后（（res）=>{
警惕（“成功”）；
控制台日志（res）；
})
.catch（（错误）=>{
console.log（错误）；
});
};
//用于更改每个输入值的处理程序
函数handleChangeUpdate（id，事件）{
常量{name，value}=event.target；
const newList=list.map（（项）=>{
如果（item.id==id）{
常量updateItem={
…项目，
[名称]：值
};
返回updateItem；
}
退货项目；
});
设置列表（newList）；
console.log（newList）；
}
返回(

{list.map（（项）=>(

handleChangeUpdate（item.id，event）}
defaultValue={item.name}
>
handleChangeUpdate（item.id，event）}
defaultValue={item.description}
>
handleChangeUpdate（item.id，event）}
defaultValue={item.city}
>
更新

))}

);
};
这是因为您从未设置道具的值。这就是为什么它们从不改变初始值的原因。您只需更新handleChangeUpdate中的
列表
道具。对于现有文件结构，您需要采取两个步骤：

使handleChangeUpdate能够区分不同的道具（城市、描述等）。例如，通过传递道具的名称
在handleChangeUpdate中更新道具的值
要实现第一步，可以按如下方式更改输入标记：

{/*注意handleChangeUpdate的第一个参数*/}
handleChangeUpdate（“name”，item.id，event）}
defaultValue={item.name}
>

然后，您需要调整handleChangeUpdate：

if（name==“name”）{
设置名称（值）；
}else if（名称==“说明”）{
设置描述（值）；
}else if（名称==“城市”）{
设定值；
}

顺便说一句，list不是变量的好名字

或者
在不创建新参数的情况下，也可以仅使用事件来设置道具


//用于更改每个输入值的处理程序
函数handleChangeUpdate（id，事件）{
常量{name，value}=event.target；
const newList=list.map（（项）=>{
如果（item.id==id）{
常量updateItem={
…项目，
[名称]：值
};
返回updateItem；
}
退货项目；
});
设置列表（newList）；
console.log（newList）；
如果（名称==“名称”）{
设置名称（值）；
}else if（名称==“说明”）{
设置描述（值）；
}else if（名称==“城市”）{
设定值；
}
}
我认为
onUpdate
功能中有3个错误

您没有从
onClick
事件传递项目的
id
您的
put
方法应该更改
您不应该在
put
请求之后立即执行
get
请求，因为有时后端还不会更新
您可以按如下方式更新代码

1.单击按钮时传递项目的
id

<button onClick={onUpdate(item.id)}>Update</button>

3.在响应
put
请求后执行
get
请求

  const onUpdate = (e) => {

    const test = {
      name: name,
      description: description,
      city: city
    };

    console.log(test);

    // axios request PUT data on API
    axios
      .put(
        `https://6092374385ff5100172122c8.mockapi.io/api/test/users/${e}`,
        test
      )
      .then((res) => {
        console.log(res);

        // axios request GET to get the new modified list from the database, after the update
        axios
          .get("https://6092374385ff5100172122c8.mockapi.io/api/test/users")
          .then((res) => {
             alert("success");
            console.log(res);
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        console.log(error);
      });
  };

是的，
newList
一旦更改，确实在更改。然而，
const test
总是空的，因为你不需要
setName（）
，
setDescription（）
，
setCity（）
，你说的是什么意思？它们已经在hooks中设置了，不是吗？是的，它在hooks中，但您只是读取
name
，而不是首先使用
setName
写入值。这就是为什么你总是有空值（默认值为“”）@ganhongjian我明白了。你介意来看看吗
axios
      .put(
        `https://6092374385ff5100172122c8.mockapi.io/api/test/users/${e}`,
        test
      ).then((res) => {
        alert("success");
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });

  const onUpdate = (e) => {

    const test = {
      name: name,
      description: description,
      city: city
    };

    console.log(test);

    // axios request PUT data on API
    axios
      .put(
        `https://6092374385ff5100172122c8.mockapi.io/api/test/users/${e}`,
        test
      )
      .then((res) => {
        console.log(res);

        // axios request GET to get the new modified list from the database, after the update
        axios
          .get("https://6092374385ff5100172122c8.mockapi.io/api/test/users")
          .then((res) => {
             alert("success");
            console.log(res);
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        console.log(error);
      });
  };