Javascript 将动态表单序列化为对象数组

这是我在redux中的初始状态

grains:[{grainId:，amount:“0.0”}]，

我试图让我的表单序列化为类似的东西，但我找不到一种方法将grains作为外部对象。我想知道这是否可能，或者我是否需要手动重新创建对象。或者直接从商店获取状态信息

我的表单如下所示：

<select
    name='grainId'
    value={this.props.value}
>
 ...options
</select>
<input
    type="text"
    name='amount'
    value={this.props.value}
 />

const r1_initialState = { grains: [{grainId: "", amount: 0.0}] };
const reducer1 = (state = r1_initialState, action) => {
  switch(action.type) {
    case CHANGE_GRAIN: 
        const {index, key, newValue} = action;
        const grainsCopy = [...state.grains];
      grainsCopy[index][key] = newValue;
        return {...state, grains: grainsCopy};

    case ADD_EMPTY_GRAIN: {
      return {...state, grains: [...state.grains, {grainId: '', amount: 0.0}]}
    }
    default: 
      return state;
  }
};

…选项

然后有一个AddGrain按钮，该按钮将在状态下向数组添加另一个对象，然后在页面上呈现表单的另一部分。是否有方法将每个“Grain”部分包装在表单元素中，以便很好地序列化

---

如果不是，我可以在表单提交上发布存储区中的状态，还是这是一种糟糕的做法

由于您已经从redux状态加载了初始表单数据，我认为让表单在更改时更新redux状态是有意义的。使用这种方法，每个输入技术都会触发Redux状态的更新，然后将其传递给组件（通过

mapstatetops

），并导致重新呈现显示新值。这样，您可以确保在减速器中，状态始终具有您喜欢的形状（

{grains:[{grainId:”，amount:“0.0”}，等等…]）

）

正如您所暗示的，这意味着当您最终提交时，您基本上是在提交Redux表单状态（或者至少是从它传递下来的道具）

可能看起来像这样（可运行）：

如果这看起来工作量太大，但您仍然希望将表单数据保持在Redux状态，那么有一些库，如，可以为您的表单处理onChange等的重复处理

---

另一个选项是从Redux加载初始状态，但只需使用它设置组件的内部状态。然后将所有表单更改作为组件状态的更改来处理。可以使用与上面示例中相同的逻辑来呈现数组中的字段。

，因为您已经在加载组件的初始状态从redux状态中获取数据，我认为让表单在更改时更新redux状态是有意义的。通过这种方法，每个输入技术都会触发redux状态的更新，然后将更新传递给组件（通过

MapStateTrops

），并导致显示新值的重新渲染。这样，您可以确保在减速器中，状态始终具有您喜欢的形状（

{grains:[{grainId:”，amount:“0.0”}，等等。]

）

正如您所暗示的，这意味着当您最终提交时，您基本上是在提交Redux表单状态（或者至少是从它传递下来的道具）

可能看起来像这样（可运行）：

如果这看起来工作量太大，但您仍然希望将表单数据保持在Redux状态，那么有一些库，如，可以为您的表单处理onChange等的重复处理

另一个选项是从Redux加载初始状态，但只使用它来设置组件的内部状态。然后将所有表单更改作为组件状态的更改来处理。可以使用与上面示例中相同的逻辑来呈现数组中的字段

const r1_initialState = { grains: [{grainId: "", amount: 0.0}] };
const reducer1 = (state = r1_initialState, action) => {
  switch(action.type) {
    case CHANGE_GRAIN: 
        const {index, key, newValue} = action;
        const grainsCopy = [...state.grains];
      grainsCopy[index][key] = newValue;
        return {...state, grains: grainsCopy};

    case ADD_EMPTY_GRAIN: {
      return {...state, grains: [...state.grains, {grainId: '', amount: 0.0}]}
    }
    default: 
      return state;
  }
};