UseState 呈现之前的状态

Question

我有两个输入同时更改 P 标签的文本，但问题是显示给我的渲染始终是之前保存的值。我知道我必须使用 useEffect 再次渲染组件并显示当前值，但是在输入 handleChange 中，如果我需要发送到更改文本的 SetState，则保存在 initialValue 中的值。到目前为止，我正在学习 React，我已经尝试了很多东西，但对我来说没有任何效果，在这种情况下我该如何实现 useEffect？非常感谢您的帮助。

const initialValue = {
  input1: 0,
  input2: 0,
};

const TestState = () => {
  const [obj, setObj] = useState(initialValue);
  const [textChange, setTextChange] = useState("-");

  useEffect(() => {}, [obj]);

  const handleChange = (e) => {
    setObj({ ...obj, [e.target.name]: e.target.value });
    //Basically I need to do this -> setTextChange(e.target.value), but with the value stored in the initialValue.
    setTextChange(e.target.name === "input1" ? obj.input1 : obj.input2);
  };

  return (
    <div>
      <form>
        <input type="text" name="input1" onChange={handleChange} />
        <input type="text" name="input2" onChange={handleChange} />
      </form>
      <p>{textChange}</p>
    </div>
  );
};

https://codesandbox.io/s/practical-mahavira-pd94p?file=/src/TestState.js

Answer 1

你从useState（即setObj）得到的setter不会立即改变受控对象的value/state。更新发生在下一个 render() 之前。这就是为什么您的 obj 对象看起来陈旧。

注意，您不需要替换 obj 对象本身，您只是更新它的内容。你可以这样做：

const [obj] = useState(initialValue);
...

const handleChange = (e) => {
  //setObj({ ...obj, [e.target.name]: e.target.value });
  obj[e.target.name] = e.target.value;
  setTextChange(e.target.name === "input1" ? obj.input1 : obj.input2);
}

UseState 呈现之前的状态

UseState renders me the previous state

javascript

reactjs

use-effect

use-state