Question

我有两个组件，我想设置新值以在单击按钮时从子组件中声明状态，所以我有以下内容

// parent component 

const [clickedSubmit, setClickedSubmit] = useState(false);
const [state, setState] = useState({
   ..,
   val: '',
})

  function handleOnSubmit(e) {
    e.preventDefault();

    setClickedSubmit(true);

    console.log(state);
  }

// child component 

..
useEffect(() => {
  if (clickedSubmit) {
   setState({
        ...state,
        val: sigRef.current.getTrimmedCanvas().toDataURL("image/png"),
      });
     }
}, [clickedSubmit])

state.val为空，当我第一次单击按钮时，仅在第一次后才显示值，当我在handleOnSubmit函数外部进行console.log时，它记录两次，第一次为空，第二次为值。为什么会发生这种情况，我怎么只能在handleOnSubmit函数中获取具有更新值的状态？

Answer 1

因为状态更改是异步的因此，您将无法立即检查状态

您可以使用useEffect函数

像这样

useEffect(()=>{
    console.log("useEffect state",state)
},[staet])

setState不会在第一次响应时更新

1 个答案: