У меня есть список задач, и я хочу установить состояние этого элемента в массиве как «завершено», если пользователь нажимает «завершить».

Вот мое действие:

export function completeTodo(id) {
    return {
        type: "COMPLETE_TASK",
        completed: true,
        id
    }
}

Вот мой редуктор:

case "COMPLETE_TASK": {
             return {...state,
                todos: [{
                    completed: action.completed
                }]
             }
        }

Проблема, с которой я столкнулся, заключается в том, что в новом состоянии больше нет текста, связанного с этим элементом todo на выбранном элементе, и идентификатора больше нет. Это потому, что я перезаписываю состояние и игнорирую предыдущие свойства? Моя загрузка объекта выглядит так:

Objecttodos: Array[1]
    0: Object
        completed: false
        id: 0
        text: "Initial todo"
    __proto__: Object
    length: 1
    __proto__: Array[0]
    __proto__: Object

Как видите, все, что я хочу сделать, это установить для завершенного значения значение true.

17
Filth 7 Дек 2016 в 16:20

3 ответа

Лучший ответ

Вам нужно преобразовать массив todos, чтобы обновить соответствующий элемент. Array.map - это самый простой способ сделать это:

case "COMPLETE_TASK":
    return {
        ...state,
        todos: state.todos.map(todo => todo.id === action.id ?
            // transform the one with a matching id
            { ...todo, completed: action.completed } : 
            // otherwise return original todo
            todo
        ) 
    };

Существуют библиотеки, которые помогут вам с таким глубоким обновлением состояния. Вы можете найти список таких библиотек здесь: https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities

Лично я использую ImmutableJS (https://facebook.github.io/immutable-js/ ) которая решает проблему с помощью методов updateIn и setIn (которые более эффективны, чем обычные объекты и массивы для больших объектов с большим количеством ключей и для массивов, но медленнее для маленьких).

54
TomW 7 Дек 2016 в 13:37

Один из основополагающих принципов проектирования в React - «Не изменяйте состояние». Если вы хотите изменить данные в массиве, вы хотите создать новый массив с измененными значениями.

Например, у меня есть массив результатов в состоянии. Первоначально я просто устанавливаю значения 0 для каждого индекса в моем конструкторе.

this.state = {           
       index:0,
        question: this.props.test[0].questions[0],
        results:[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0]],
        complete: false         
};

Позже я хочу обновить значение в массиве. Но я не изменяю это в государственном объекте. С ES6 мы можем использовать оператор распространения. Метод среза массива возвращает новый массив, он не изменит существующий массив.

updateArray = (list, index,score) => {
   // updates the results array without mutating it
      return [
        ...list.slice(0, index),
        list[index][1] = score,
       ...list.slice(index + 1)
     ];
};

Когда я хочу обновить элемент в массиве, я вызываю updateArray и устанавливаю состояние за один раз:

this.setState({
        index:newIndex, 
        question:this.props.test[0].questions[newIndex],
        results:this.updateArray(this.state.results, index, score)
});
2
Charles Owen 27 Фев 2018 в 19:12

В новом состоянии больше нет текста, связанного с этим элементом todo на выбранном элементе, и идентификатора больше нет. Это потому, что я перезаписываю состояние и игнорирую предыдущие свойства?

Да, потому что при каждом обновлении вы назначаете новый массив с только одним ключом completed, и этот массив не содержит никаких предыдущих значений. Так что после обновления массив не будет иметь предыдущих данных. Вот почему текст и идентификаторы отсутствуют после обновления.

< STRONG> Решения :

1 - Использование array.map, чтобы найти правильный элемент, а затем обновить значение, например:

case "COMPLETE_TASK":
    return {
        ...state,
        todos: state.todos.map(todo => 
            todo.id === action.id ? { ...todo, completed: action.completed } : todo
        ) 
    };

2- Используйте array.findIndex чтобы найти индекс этого конкретного объекта, а затем обновить его, как это:

case "COMPLETE_TASK":
    let index = state.todos.findIndex(todo => todo.id === action.id);
    let todos = [...state.todos];
    todos[index] = {...todos[index], completed: action.completed};
    return {...state, todos}

Посмотрите этот фрагмент, и вы получите лучшее представление о совершенной вами ошибке:

let state = {
  a: 1,
  arr: [
    {text:1, id:1, completed: true},
    {text:2, id:2, completed: false}
  ]
}

console.log('old values', JSON.stringify(state));

// updating the values

let newState = {
   ...state,
   arr: [{completed: true}]
}

console.log('new state = ', newState);
4
Mayank Shukla 8 Июн 2018 в 04:17