更新react redux

Question

我是react-redux的新手。

const initialState = {
    Low: [
        {
            id: 0,
            type: '',
            count: '',
            allowded: 6,
            level: 'EASY'
        }
    ],
    Medium: [
        {
            id: 0,
            type: '',
            count: '',
            allowded: 7,
            level: 'MEDIUM'
        }
    ],
    High: [
        {
            id: 0,
            type: '',
            count: '',
            allowded: 7,
            level: 'TOUGH'
        }
    ]
}

这是我的初始状态值。

之后，

onChange(event, tobeupdated, id, type, noc, data) {
   let newData = { ...this.props.data };
    if (newData) {
      let data = newData[type].map((object, index) => {
        if (object.id === id) {
          object[tobeupdated] = event.target.value;
          const tobeData = newData[type];
         this.props.updateLowLevel({tobeData, type}).then(() => {
            let criteria_filled = this.disableAddbutton({ ...this.props.data }, type);
            addedRow = `new${type}RowAdded`;
            this.setState({
              [addedRow]: criteria_filled ? true : false
            })
});
}

这样，我将更新对象值。然后替换整个对象。

return (dispatch) => {
    dispatch({
      type: QUIZ_DATA,
      data: tobeUpdated,
    });
    return Promise.resolve();
  }
}

在我的减速器中，

case QUIZ_DATA:
            return {
                ...state,
                [action.data.type]: [action.data.tobeData],
                error: false,
            }

现在，这是当我更改“ type”时发生的情况，然后将对象数组作为子对象添加到前一个数组中。因此，它的添加数量与您添加的数量相同。 所以，因此，我无法正确获得该渲染。

所以发生的是 低：

这种方式被添加。那么，我该怎么做？

有人可以帮我吗？

Answer 1

尝试一下作为减速器。它将tobeData的内容传播到一个数组中。

case QUIZ_DATA:
            return {
                ...state,
                [action.data.type]: [...action.data.tobeData], // the difference is here
                error: false,
            }

Answer 2

[action.data.type]: [...action.data.tobeData],

您通过action.data.tobeData (eg: [1,2,3])传递的数据是数组本身。

因此，当您使用[action.data.type]: [action.data.tobeData]时，这将创建数组[[1, 2, 3]]的数组。

您可以使用[action.data.type]: [...action.data.tobeData]，这称为散布运算符，它所做的基本上就是复制element内的所有action.data.tobeData并将其散布。

您可以参考此文档 Spread syntax