为啥 setState 回调会抛出错误：“来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数...”

Posted 2023-02-22

【中文标题】为啥 setState 回调会抛出错误：“来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数...”

【英文标题】：Why does setState callback throw an error: "State updates from the useState() and useReducer() Hooks don't support the second callback argument..."为什么 setState 回调会抛出错误：“来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数...”

【发布时间】：2021-10-11 11:57:15

【问题描述】：

我正在尝试创建一个 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() Hooks 的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 useEffect() 声明它。

我错过了什么？

【参考方案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 <>...</>

【讨论】：

试过了。错误：无法在回调中调用 React Hook “useEffect”。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

读取新错误，需要在顶层调用useEffect，不在函数内部，请阅读文档。

非常感谢！