复杂状态未正确更新[重复]

Posted 2023-02-21

【中文标题】复杂状态未正确更新[重复]

【英文标题】：Complex state not updating correctly [duplicate]

【发布时间】：2021-12-14 19:25:51

【问题描述】：

问候：

我不相信我正在正确更新我的复杂状态：

export const App = () => 
  const [combos, setCombos] = useState(
    combo1:  data: [1, 2, 3, 4, 5], selected: "" ,
    combo2:  data: [8, 9, 10, 11, 12], selected: "" 
  );
  return (
    <div>
      <button  onClick=() => setCombos((ps) => ( ...ps, combo1:  selected: "" >
        Click Me
      </button>
      <div>
        Combo 1 has a "data" key:combos.combo1.hasOwnProperty("data") ? "Yes" :No"
      </div>
    </div>
  );
;

如何正确更新此状态？谢谢！

https://codesandbox.io/s/intelligent-ellis-qi97k?file=/src/App.js

【问题讨论】：

代码中还有错别字（缺少一些右括号）。

setCombos((ps) => ( ...ps, combo1: ...ps.combo1, selected: "" )) 但它的要点是传播嵌套的combo1 对象以避免丢失其其他属性。

这段代码是否符合您的要求？如果没有，结果是什么？你期望的结果是什么？

谢谢 Emile...您的回复很有帮助。亚历克斯 - 请重新阅读问题。所有信息都在那里。

【参考方案1】：

设置状态时，您还必须在 combo1 属性中使用扩展运算符。如果您只更新选定的属性，数据属性将会丢失。

export const App = () => 
  const [combos, setCombos] = useState(
    combo1:  data: [1, 2, 3, 4, 5], selected: "" ,
    combo2:  data: [8, 9, 10, 11, 12], selected: "" 
  );
  return (
    <div>
      <button  onClick=() => setCombos((ps) => ( ...ps, combo1:  ...ps.combo1, selected: "" >
        Click Me
      </button>
      <div>
        Combo 1 has a "data" key:combos.combo1.hasOwnProperty("data") ? "Yes" :No"
      </div>
    </div>
  );
;