如何在React状态中的另一个复杂对象中整齐地推动对象？

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条腿上，而在“入口”对象内。

我的疑问是为什么它不适用于索引，而是为触发索引和触发器所做的触发器工作

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

Answer 1

有一个专门为这种场景insmer.js建造的美丽库。请在