用 useState 反应 setState

Question

我有这个小的可见性更改器，它可以完美地更改可见性变量的属性，但我的问题是，它会从“productsState”中删除所有其他变量。不应该保留其他变量吗？

const listing = () => {
const visibility= !productsState.visibility;
setProdState({visibility : visibility})
}

Answer 1

Functional Updates

<块引用>

注意

与类组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新程序形式与对象相结合来复制此行为 传播语法：

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

您的代码应该更新为使用功能状态更新并传播到之前的状态：

const listing = () => {
  setProdState(prevState => ({
    ...prevState,
    visibility: !prevState.visibility,
  }))
}

此处执行以下操作之一的其他答案未从先前状态正确更新（尽管可能没有任何明显或不利的副作用）：

1. const visibility= !productsState.visibility; 正在切换当前渲染的状态，而不是之前的状态。
2. setProdState({...productsState, visibility : visibility}) 的一些变体再次 productsState 是更新排入队列的渲染周期的状态，而不是之前的状态。

Answer 2

您可以在此处使用点差运算符

const listing = () => {
const visibility= !productsState.visibility;
setProdState({...productsState, visibility : visibility})
}

详细了解spread syntax

Answer 3

因为 productsState 是一个对象，所以当你将它传递给 setProdState 时你可以传播它，或者你可以使用具有相同效果的 Object.assign

setProdState({...productsState, visibility: visibility});

或

setProductState(Object.assign({}, productsState, {visibility: visibility}));