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

Question

招呼：

我认为我没有正确更新我的复杂状态：

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

Answer 1

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

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