Похоже, вам нужно создать функцию более высокого порядка, которая вызывает две последующие функции:
onClick={(event) => {
handleChange(event)
onSubmit(event)
}}
Или вы можете просто вызвать handleChange
изнутри onSubmit
:
const onSubmit = (event) => {
event.preventDefault();
handleChange(event)
setValues({ status:"", error: false, loading: true });
console.log(status);
updateOrderStatus(match.params.orderId, user._id, token, status).then(
(data) => {
if (data.error) {
setValues({ error: data.error, success: false });
} else {
setValues({ status: "", success: true });
console.log("STATUS:",status);
}
}
)};
В этом случае вы можете просто вызвать onClick
из события щелчка компонентов:
onClick={onSubmit}
Также обратите внимание, что в обратном вызове .then
вы звоните на setValues
здесь:
setValues({ status: "", success: true });
console.log("STATUS:",status);
Когда вызывается setValues
, это вызывает повторную визуализацию компонента. При этом повторном рендеринге status
, извлеченное из values
, будет отражать пустую строку, которую вы добавили здесь: setValues({ status: "", success: true });
.
Однако status
в console.log("STATUS:",status)
будет отражать значение status
перед повторным рендерингом, то есть "pending"
.