如何在反应状态下巧妙地将一个对象推送到另一个复杂对象中？

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 条腿，但在 'entry' 对象内。

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

的触发器

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

Answer 1

专门为这样的场景打造了一个漂亮的库immer.js。前往 https://www.npmjs.com/package/immer

查看