Question

请告诉我如何从状态中获取更新值。这是我的代码 https://codesandbox.io/s/cool-ives-0t3yk

我的初始状态

const initialState = {
  userDetail: {}
};

我在输入字段上输入10 digit号，然后按Enter键并更新用户详细信息

const onSubmit = async values => {
    if (values.mobile.length === 10) {
      setUserDetail({ msdin: values.mobile });
      console.log(userDetail);
    }
  };

setUserDetail({ msdin: values.mobile });在这里，我正在更新userdetail。

并尝试console the update value like this

console.log(userDetail);。它当前显示undefined。但预期输出为{msdin:'9999999999'}（或在输入字段中键入的任何内容）

Answer 1

问题是您使用的是钩子，并且没有同步，而是异步的。因此，将无法在设置值后立即访问详细信息。如果要访问那里的数据，则必须使用values.mobile

Answer 2

状态将保留最后一个值，直到调用下一个渲染为止。

您可以在react-hooks document

上看到此信息

在后续重新渲染期间，useState返回的第一个值将始终是应用更新后的最新状态。

因此，代码应类似于：

  const onSubmit = async values => {
    if (values.mobile.length === 10) {
      const newUserDetailState = { msdin: values.mobile }
      setUserDetail(newUserDetailState);
      // do your stuffs with the newUserDetailState instead of userDetail
      console.log(newUserDetailState);
    }
  };

Answer 3

状态设置器setUserDetail是异步的，这意味着新的状态值将不会立即可用。

要查看状态更新是否像这样使用useEffect：

  useEffect(() => {
    console.log('useEffect -> UserDetail : ', userDetail);
  }, [userDetail]);

为什么从状态单击按钮后它不显示更新值？

3 个答案: