不可变助手更新数组中对象中的值

Question

我试图在我正在尝试做的事情的背景下理解不可变助手。 我正在尝试根据 onChange 事件何时调用 INPUT_CHANGE 操作来更新内部的对象。它应该添加到 formData 值而不是替换它。我尝试了 $add 但这也没有按照我想要的方式工作。 此外，每次更改新的输入文件时，它都会添加一个具有相同更新更改的新对象。

Array[index] -> input1 -> INPUT_CHANGE -> 使用输入字段的键和值在对象更改时更新对象。

inputs=[{key:{key:'input name', value: mew}}]

Array[index] -> input2 -> INPUT_CHANGE -> 使用输入字段的键和值在对象更改时更新对象。

 inputs=[{key:{key:'input name', value: mew}}, {key:{key:'input name', value: mew}}]

等等……

   const setupState = {
      count: 0,
      inputs: [{}],
    };

export default (state = setupState, action) => {
  switch (action.type) {
    case INPUT_CHANGE: {
      // const formDataArr = state.inputs[count];
      return update(state, {
        inputs: [{
          key: { $set: action.key },
          value: { $set: action.value },
        }],
      });
    }

    default: return state;
  }
};

对于如何为此使用不可变助手有点困惑？

更新： 这是用户更新每个输入时对象的外观。

inputs: [
  {
    "score": {
      "key": "score",
      "value": "20....",
    },
    "hits": {
      "key": "hits",
      "value": "ss..",
    }
  }
]

Answer 1

试试这个。

export default (state = setupState, action) => {
switch (action.type) {
    case INPUT_CHANGE: {
        // const formDataArr = state.inputs[count];
        return update(state, {
            inputs: [
            // contain origin state.inputs!!!!!!!!!!!!!!!!!!!
            ...state.inputs,
            {
                key: { $set: action.key },
                value: { $set: action.value },
            }],
        });
    }

    default: return state;
}