Reactjs 将setState与useState反应

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

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

---

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

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

---

阅读有关

的更多信息您可以在此处使用扩展运算符

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

阅读更多关于

的信息，因为productsState是一个对象，您可以在将其传递给setProdState时展开它，也可以使用具有相同效果的object.assign

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

或

由于productsState是一个对象，您可以在将其传递给setProdState时将其展开，也可以使用具有相同效果的object.assign

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

或

注

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

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

您的代码应更新为使用功能状态更新，并在以前的状态下传播：

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

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

常量可见性=！产品状态、可视性；正在从当前渲染的状态而不是上一个状态切换。 setProdState{…productsState，visibility:visibility}的一些变体，同样productsState是更新排队的渲染周期中的状态，而不是以前的状态。 注

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

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

您的代码应更新为使用功能状态更新，并在以前的状态下传播：

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

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

常量可见性=！产品状态、可视性；正在从当前渲染的状态而不是上一个状态切换。 setProdState{…productsState，visibility:visibility}的一些变体，同样productsState是更新排队的渲染周期中的状态，而不是以前的状态。