обновить массив объекта в реагирующем редуксе

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

[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 и распространяет его.

Вы можете обратиться к этому документу Распространение синтаксиса

Answer 2

Попробуйте это как редуктор.Он распространяет содержимое tobeData в массив.

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