onChange在每次渲染时监视用户从Office-UI-Fabric到TextField组件的输入并显示不正确的输出

Question

我正在尝试实现一个UI，在这个ui中，我通过Office-ui-fabric的TextField组件获取用户输入。我使用onChange来监视值。但是，当我在用户输入中输入数字'100‘时，我可以看到每次呈现的函数，我相信这是onChange的一个功能，但在完成输入后，我在控制台窗口中只能看到'10’。

我试着按照旧的stackoverflow帖子中的建议将onChange改为模糊，但当我这样做时，我没有看到任何控制台消息。

const [msg, setMsg] = React.useState("");
React.useEffect(()=>{
   vscode.postMessage(
     {
       command: 'setMsg',
       text: msg
     }
   );
},[msg])

return (
<div>
 <Stack>
   <Stack.Item grow>
   <Label style={{ color: 'white' }}>Enter number </Label>
   <TextField placeholder="Enter number of images" value={msg} onChange={event => { setMsg((event.target as HTMLInputElement).value); console.log(msg);test() }} /> 
   </Stack.Item>
   </Stack>
</div>
);

我希望如果我输入数字'100‘，我应该在控制台日志中看到'100’。目前我看到的是‘10’。这是实现此功能的正确方式吗？对于react和office -ui-fabric的新功能以及任何帮助，我们将非常感谢。

Answer 1

React中的setState是async，执行/更新状态需要一些时间。

当你这样做的时候，

onChange={event => { 
   setMsg((event.target as HTMLInputElement).value); 
   console.log(msg);
   test() 
}}

在setState之后，您将尝试访问该状态，结果将只给出以前的状态。

要查看实际效果，请从onChange中删除此console.log并使用useEffect钩子。因为您已经有了将在msg更改时执行的useEffect，所以您只需要在其中添加console.log(msg)行。

React.useEffect(()=>{
        console.log(msg); // Now you will get updated value every time.
        vscode.postMessage(
            {
                command: 'setMsg',
                text: msg
            }
        );
},[msg])