用功能更新输入状态

Question

我现在正在尝试使用react，并且试图了解批处理的工作方式。据我了解，当我在setState中使用function时，它将可靠地读取当前状态。我定义了一个输入标签，当它接受对象时，可以更新输入文本，如下所示：

const [inputText, setInputText] = useState('');
<input
    onChange={(e) => {
      setInputText(e.target.value);
    }}
  />

但是，当我尝试使用以下功能更新状态时：

<input
    onChange={(e) => {
      setInputText((inputText) => e.target.value);
    }}
  />

对于第二个onchange事件触发器，它将引发“无法读取null的属性'值'”。为什么呢？

Answer 1

事件为pooled。并且setState回调是异步的。因此，当您提取该值时，该事件已经回到池中。

<input
    onChange={(e) => {
      const {value} = e.target;
      setInputText((inputText) => value);
    }}
  />

在此示例中，您实际上并不需要设置状态的回调版本，因为下一个值不依赖于上一个。