为什么 setState 回调会抛出错误："State updates from the useState() and useReducer() Hooks don't support the se

Question

我正在尝试创建一个setState回调作为setState是异步的，我想安全地使用状态之后。

function Register(props) {
const [errMsg, setErrMsg] = useState(null);

const fullNameInputRef = useRef();
const emailInputRef = useRef();
const passwordInputRef = useRef();

function submitHandler(event) {
event.preventDefault(); //prevents full page reload

const enteredFullName = fullNameInputRef.current.value;
const enteredEmail= emailInputRef.current.value;
const enteredPassword = passwordInputRef.current.value;
axios({
method: 'post',
url: 'http://localhost:3000/api/users/register',
data: {
username: enteredFullName,
email: enteredEmail,
password: enteredPassword
}
}).then( (res) => {
if (res.data.success == false) {
setErrMsg(`${res.data.message}`, () => {  /* setState Callback */
console.log(errMsg);
});
}
else { console.log(res)}
}).catch( (err) => {
console.log(err)
setErrMsg("An error has occured. Please try again later")
});

}

但是回调中的console.log不起作用。(console.log (errMsg);(我得到以下错误:

警告:useState()和useReducer()钩子的状态更新不支持第二个回调参数。要在渲染后执行副作用，可以使用useEffect()在组件体中声明它。

我错过了什么?

Answer 1

和错误状态一样，钩子的setState不支持类组件中的第二个参数:

// BAD, WRONG API
setErrMsg(`${res.data.message}`, () => console.log(errMsg));

改为添加useEffect:

// GOOD
setErrMsg(`${res.data.message}`);
useEffect(() => {
console.log(errMsg);
}, [errMsg]

完整代码:

function Register(props) {
const [errMsg, setErrMsg] = useState(null);

...
useEffect(() => {
console.log(errMsg);
}, [errMsg]

function submitHandler(event) {
...
axios({ ... }).then((res) => {
if (res.data.success == false) {
setErrMsg(`${res.data.message}`);
}
else { console.log(res)}
}).catch( (err) => {
console.log(err)
setErrMsg("An error has occured. Please try again later")
});
}
return <>...</>
}