设置状态后，反应状态落后一步

Question

我有一个输入字段，它有一个OnChange函数处理程序来更新valA。然而，在我调用valA的setState后，控制台不会记录更改后的值——它落后一步

我如何让它记录新的输入？

function test( props ){
const { valA, setValA } = props
function handleOnChange( e ){

var newValA = e.target.value
setValA(newValA)
console.log(valA)
return( null )
}
return( null )

}

Answer 1

您需要使用useEffect:查看更新后的状态

function handleOnChange() { // your logic }
useEffect(() => {
console.log(valA);
}, [valA]);

Answer 2

您提到的代码不会按预期工作，但值会正确更新。也就是说，由于js异步行为，console.log将在setValue之前执行，但在OnChangeHandler结束时，值将按预期更新。正如@AdriSolid所提到的，查看更新值的最佳方式是使用useEffect挂钩，不建议使用console.log查看状态值，因为异步行为会导致行为与预期不一样。这并不是说这个值是落后的状态，这个值会被正确地更新——这只是让我们认为它是落后的执行行为！

此外，您可以使用Ref钩子而不是事件对象来更新值

像这样的

const ref = useRef();
const [value, setValue] = useState("");
useEffect(() => console.log(value), [value]);
const OnChangeHandler = () => {
var newValA = ref.current.value
setValue(newValA)
// console.log(value)
return( null )
}
return (
<div className="App">
<input
ref={ref}
value={value}
onChange={ OnChangeHandler }
/>
</div>
);

Answer 3

function A(props){
const [input, setinput] = useState(props.valA);
<Input 
value={input}
onChange={(e) => setinput(e.target.value)} 
/>
console.log(input);
}