React - Axios put 请求得到奇怪的结果答案

【问题标题】：React - Axiost put request get weird resultReact - Axios put 请求得到奇怪的结果
【发布时间】：2021-11-21 17:41:54
【问题描述】：

我正在使用后端处理我的项目。目前正在开发一个组件，该组件执行put 请求以更新customer bean 的详细信息。但是，我遇到了一种奇怪的行为。

组件：

function UpdateCustomer(props): JSX.Element {
    
    const history = useHistory();
    const [skipCount, setSkipCount] = useState(true);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    
    async function formData() {
  
      try {
        const response = await axios.put<CustomerModel>(globals.adminUrls.updateCustomer + props.location.state.id, {
          firstName: firstName,
          LastName: lastName,
          email: email,
          password: password
        });
  
        const updated = response.data;
        store.dispatch(customerUpdatedAction(updated));
        notify.success(CUSTOMER_SccMsg.CUSTOMER_UPDATED)
  
      }
      catch (err) {
        notify.error(err);
      }
    }
  
    const handleSubmit = (e) => {
      e.preventDefault();
      formData();
    }
  
    useEffect(() => {
      if (skipCount) setSkipCount(false);
      if (!skipCount) formData();
  
    }, []);
  
    return (
      <div className="custom-field">
        <h2>Update Customer</h2>
        <div>
          <form onSubmit={handleSubmit} >
              
            <label>First name</label>
            <input type="text" name="firstName" onChange={(e) => { setFirstName(e.target.value) }} />
            <label>Last name</label>
            <input type="text" name="lastName" onChange={(e) => { setLastName(e.target.value) }} />
            <label>Email</label>
            <input type="text" name="email" onChange={(e) => { setEmail(e.target.value) }} />
            <label>Password</label>
            <input type="text" name="password" onChange={(e) => { setPassword(e.target.value) }} />
  
            <input type="submit" name="submit" />
          </form>
        </div>
      </div>
    );
  }
export default UpdateCustomer;

后端服务：

public void updateCustomer(@Valid int id, CustomerDto customerDto) throws  DoesNotExistException {

        Customer customerDao = customerMapper.toDao(customerDto);

        if (!custRepo.existsById(id))
            throw new DoesNotExistException("Customer does not exist");

        custRepo.saveAndFlush(customerDao);

后端控制器：

  @PutMapping(value = "update/customer/{id}")
    @ResponseStatus(HttpStatus.ACCEPTED)
    @Override
    public void updateCustomer(@PathVariable int id, @RequestBody CustomerDto customerDto) throws DoesNotExistException {
        adminService.updateCustomer(id, customerDto);
    }

我得到的结果：

出于某种原因，我能够将除lastName 之外的所有字段保存到一个常量中。它的行为与其他字段完全相同。但是，此特定字段将null 发送到服务器，而其他字段则发送输入值。
而不是执行 update 来 bean 它只是 adds this 作为一个单独的 bean。

为什么这很奇怪？

我有一个用于更新公司的相同组件，它似乎工作得很好。为什么这个组件的行为不同？

希望有人能解决这个问题。

谢谢。

【问题讨论】：

标签： reactjs axios put

【解决方案1】：

您将姓氏放在请求正文中，请查看下图：

我认为这里有一个错误，看起来应该是lastName，而不是LastName。

【讨论】：

感谢您注意到这一点，它解决了我的一个问题。但是，你能明白为什么它的反应是post 而不是put？
抱歉，不知道。我认为您应该测试您的后端（使用 Postman 或 cURL）以查看您的后端是否可以正常工作。然后你可以继续前进，也许 React 工作得很好，但你的后端没有按预期工作。
我解决了我的问题，但是，由于您对其他问题的看法很敏锐，我将其标记为正确答案。先生，您好。