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

Question

我试图在我正在尝试的环境中理解不可变的助手。我正在尝试根据onChange事件调用INPUT_CHANGE操作时更新内部对象。它应该添加到formData值而不是替换它。我尝试了$ add，但这并不是我想要的方式。此外，每次更改新输入字段时，它都会添加具有相同更新更改的新对象。

Array [index] - > input1 - > INPUT_CHANGE - >更新对象，其中包含键和输入字段的值，因为它发生了变化。

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

数组[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;
}