USESTATE HONK返回的更新功能未更新值

Question

正在发生非常奇怪的事情。我的状态值定义如下：

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

我还定义了与此状态值相关的使用效率挂钩，定义如下：

useEffect(() => console.log('heightfield changed, hi from the useEffect hook!'), [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}
  />

现在，当我在TextField中输入文本时，高度场值也相应地更新，并且也会触发使用效果钩。

但是，当从另一个函数中更新高度场值时，其值不会更新，也不会触发使用效率挂钩。坦白说，我不明白为什么这种行为会发生。该功能如下：

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

键入表单的提交按钮时，调用此功能，当调用时，没有触发使用效果钩，而高度场值也不会相应地更新

我缺少什么吗？为什么使用新对象调用更新函数时不更新此值？

Answer 1

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

setState({...heightField});

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

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

如果您的状态是一个对象，并且对象引用在渲染之间保持不变，则React会认为它没有更改并且不会更新它。因为它仅比较值。如果是number或string，它将按值进行比较，但是如果它是object，它将通过参考进行比较，并且不会潜入object属性中。