Question

在使用axios和useContext的React应用程序中实现补丁请求时，我遇到了一些麻烦。

我正在从我的node / express api获取数据，该数据已通过上下文提供程序提供给组件。

读取数据很好，但是我正在执行其他操作，并使自己陷入困境。

我的输入onChange处理程序注销所做的更改，然后使用本地的useState存储这些值，然后在提交表单时使用saveUsers函数将更新后的值传递给我的补丁请求。尽管我收到代码200 /成功消息，但数据没有改变。我相信我没有正确地传递更新的数据，但是尽管尝试了不同的解决方案，但我似乎还是在兜圈子。

有人能指出我正确的方向吗？

const { usersData } = useContext(UsersContext);[![enter image description here][1]][1]
  const [userValues, setUserValues] = useState(usersData);

  const [name, setName] = useState(selected[0].name);
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');

  const { token } = JSON.parse(localStorage.getItem('user'));

  const saveUsers = async (e) => {
    e.preventDefault();
    const userDetails = {
      Name: name,
      Phone: phone,
      Email: email,
    };
    console.log('userDetails', userDetails);
    const selectedUser = selected[0]._id;
    console.log('selected', selectedUser);
    const options = {
      method: 'patch',
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      url: `${BASE_URL}user/${selectedUser}`,
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
    };
    const res = await axios
      .patch(`${BASE_URL}users/${selectedUser}`, userDetails, options)
      .then(
        (response) => {
          console.log(response);
          console.log(response.status === 200, '? User Updated');
        },
        (error) => {
          console.log(error);
        }
      )
      .catch((err) => console.log(err));

    setIsLoading(false);
    setReadOnly(true);
    // history.push('/userList');
  };

  return (
    <form
      className={classes.root}
      noValidate
      autoComplete="off"
      onSubmit={saveUsers}
    >
      <div>
        <TextField
          disabled={isReadOnly}
          label="Name"
          defaultValue={selected[0].name}
          variant="outlined"
          onChange={(e) => setName(e.target.value)}
          InputProps={{
            readOnly: isReadOnly,
          }}
        />

在此示例中，我尝试将用户名从“亚历山大·汤姆·琼斯”更新为“亚历山大·琼斯”。

控制台输出：

Answer 1

我发现一个解决方案是摆脱'userDetails'并在'.patch（${BASE_URL}users/${selectedUser}，{name：name，phone：phone etc}}'之后直接用键/值替换

但是我认为应该有一种更清洁的做事方式。

axios补丁请求“成功”，但数据未更改

1 个答案: