setState 在第一次反应中没有得到更新
Posted
技术标签:
【中文标题】setState 在第一次反应中没有得到更新【英文标题】:setState doesn't get updated the first time in react 【发布时间】:2020-10-25 07:49:13 【问题描述】:我有两个组件,我想在单击按钮时将新值设置为子组件的状态,所以我有以下内容
// 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
函数内更新值的状态?
【问题讨论】:
我觉得这一行有错字:const [state, setState] = useState( .., val: '' )
你在这里尝试初始化的值是什么?
空字符串作为val
的初始化值,当用户单击提交btn 时,我试图通过将clickedSubmit
更改为@987654330 从子组件调用setState
来更改val
的值@ 但状态不会在 handleOnSubmit
函数中立即更新。
【参考方案1】:
因为状态的改变是异步的 因此您将无法立即检查状态的状态
您可以使用useEffect
函数关注它
喜欢这个
useEffect(()=>
console.log("useEffect state",state)
,[staet])
【讨论】:
是的,我在useEffect
函数中看到了值,但我找不到使用useEffect
仅获取更新值并传递给handleOnSubmit 函数的方法。现在,我制作了另一个按钮来保存该值,然后制作了另一个按钮来保存最终值。
@KaungKhantZaw ??以上是关于setState 在第一次反应中没有得到更新的主要内容,如果未能解决你的问题,请参考以下文章