我正在尝试创建一个 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() 声明它。
我错过了什么？
与错误状态一样，setStateof hooks 不支持类组件中的第二个参数：
// 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 <>...</>
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句