Question

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

我怎样才能让它记录新的输入？

Intent intent = new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

startActivityForResult(intent, SELECT_PICTURES);

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);
}

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

3 个答案: