useState 钩子返回的更新函数不更新值

Question

发生了一些非常奇怪的事情。我有一个状态值，定义如下：

const [heightField, setHeightField] = useState<FormField<string>>(new FormField<string>(""));

我还定义了一个useEffect hook，它与这个状态值相关联，它的定义如下：

useEffect(() => console.log('heightfield changed, hi from the useEffect hook!'), [heightField]);

此 heightField 值在文本字段中引用如下：

      <TextField
    required
    label="Height (cms)"
    margin="normal"
    variant="outlined"
    type="number"
    value={heightField.value}
    onChange={(event) => {
      setHeightField(new FormField<string>(event.target.value))
    }}
    error={heightField.error}
    helperText={heightField.errorMessage}
  />

现在，当我在文本字段中输入文本时，heightField 值会相应更新，并且 useEffect 挂钩也会被触发。

但是，当从另一个函数更新 heightField 值时，它的值不会更新，也不会触发 useEffect 挂钩。坦率地说，我不明白为什么会发生这种行为。函数如下：

const validateHeight = (heightField: FormField<string>) => {

    const heightNumber = parseInt(heightField.value);
    let error = false;
    let errorMessage = "";
    if (!heightNumber) {
      error = true;
      errorMessage = "Wrong number, please verify.";
    }
    else if (heightNumber < 0 || heightNumber > 220) {
      error = true;
      errorMessage = "Please verify the height";
    }
    const nHeightField = new FormField<string>(heightField.value, error, errorMessage);
    setHeightField(nHeightField);
  }

该函数在点击表单的提交按钮时被调用，调用时不会触发useEffect hook，也不会相应地更新heightField值

我有什么遗漏吗？为什么在使用新对象调用更新函数时这个值没有被更新？

Answer 1

根据您在问题和 cmets 中告诉我们的内容，state 对象引用似乎保持不变，即使其属性已更改。尝试通过执行以下操作来创建该对象的副本：

setState({...heightField});

或者，如果您在更新之前需要之前 state 中的某些内容：

setState((prevState) => {
 const aux = {...prevState};
 aux.someProp = someOtherValue;
 return aux;
});

如果你的状态是一个对象，并且对象引用在两次渲染之间保持不变，React 会认为它没有改变并且不会更新它。因为它只比较值。如果是number 或string，它将按值进行比较，但如果是object，它将按引用进行比较，不会深入到object 属性中。