用 useState 反应 setState答案

【问题标题】：React setState with useState用 useState 反应 setState
【发布时间】：2021-07-12 02:07:11
【问题描述】：

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

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

【问题讨论】：

标签： reactjs use-state

【解决方案1】：

Functional Updates

注意

与类组件中的setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新程序表单与对象组合来复制此行为传播语法：
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

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

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

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

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

【讨论】：

【解决方案2】：

您可以在此处使用扩展运算符

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

阅读更多关于spread syntax

【讨论】：

【解决方案3】：

因为productsState是一个对象，你可以将它传递给setProdState，也可以使用Object.assign，效果相同

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

或

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

【讨论】：