React - Axios 放置请求得到奇怪的结果

Question

我正在使用后端处理我的项目。目前正在开发一个组件，该组件执行 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 之外，我能够将所有字段保存到 const 中。它的行为与其他字段完全一样。但是，此特定字段将 null 发送到服务器，而其他字段发送输入值。
与其执行 update 将其作为单独的 bean，不如 adds 将其作为单独的 bean。

为什么这么奇怪？

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

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

谢谢。

Answer 1

你把姓氏放在请求正文中，检查下图：

我觉得这里有误，看起来应该是lastName，而不是LastName。

React - Axios 放置请求得到奇怪的结果

React - Axiost put request get weird result

reactjs

axios

put