如何在反应 state 中巧妙地将 object 推送到另一个复杂的 object 中？

Question

我正在尝试使用 react hook 声明一个复杂的数组作为

const [strategy, setStrategy] = useState([leg]);

在哪里

const leg = {
  entry: {
    conditions: [],
    actions: [""],
  },
  exit: {
    conditions: [],
    actions: [""],
  },
};

和

const condition = (param) => {
  return { param, val: "" };
};

现在，以下在数组中添加一条腿的代码工作正常

const addLeg = () => {
    const temp_strategy = [...strategy];
    temp_strategy.push(leg);

    setStrategy(temp_strategy);
};

现在，我想在给定索引的其中一条腿中添加一个条件（在前端单击按钮），以下是我正在尝试的代码

  const addCondition = (index, trigger, condition_param) => {
    // index is for leg
    // trigger is either 'entry' or 'exit'

    const temp_strategy = [...strategy];

    temp_strategy[index][trigger]['conditions'].push(condition(condition_param));

    setStrategy(temp_strategy);
  };

现在，如果在某个时候策略有 3 条边，如果我跟注

addCondition(1, 'entry', 'and')

然后它将上述条件附加到所有 3 条腿，但在“条目”object 内。

我的疑问是为什么它不适用于索引但它适用于索引和触发器相同的触发器

temp_strategy[index][trigger]['conditions'].push(condition(condition_param));

Answer 1

有一个专门为这种场景构建的漂亮库immer.js 。 Go 在 https 查看这个：//www.npmjs.com/package/immer