React - Axios 放置请求得到奇怪的结果
React - Axiost put request get weird result
我正在使用后端处理我的项目。
目前正在开发一个组件,该组件执行 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。
为什么这么奇怪?
我有一个用于更新公司的相同组件,它似乎工作得很好。为什么此组件的行为不同?
希望有人能解决这个问题。
谢谢。
你把姓氏放在请求正文中,检查下图:
我觉得这里有误,看起来应该是lastName
,而不是LastName
。
我正在使用后端处理我的项目。
目前正在开发一个组件,该组件执行 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。
为什么这么奇怪?
我有一个用于更新公司的相同组件,它似乎工作得很好。为什么此组件的行为不同?
希望有人能解决这个问题。
谢谢。
你把姓氏放在请求正文中,检查下图:
我觉得这里有误,看起来应该是lastName
,而不是LastName
。