UseReducer дублирует добавленные элементы

Почему добавляются два элемента вместо одного?

Мои кодыandbox

Прошу прощения за столь короткое описание, но не знаю, что еще добавить

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил вашу проблему... однако, пожалуйста, обратитесь к разделу задавать вопрос.

Проблема здесь

function reducer(state, action) {
  switch (action.type) {
    case "push":
      state.arr.push(action.payload);
      return { arr: state.arr };
    default:
  }
}

Это должно быть так, это типичный поток редьюсера, использующий спред оператор.

   function reducer(state, action) {
      switch (action.type) {
        case "push":
          return {
            ...state,
            // spread the numbers 0, 1, 2, 3, && action.paylod appends the number/item to the array
            arr: [...state.arr, action.payload] // pass the action payload 
          }
        default:
      }
    }

Рабочая демонстрация

https://codesandbox.io/embed/useredux-duplicates-the-added-elements-forked-grznpc?fontsize=14&hidenavigation=1&theme=dark

Я понимаю, что мне нужно, чтобы массив соответствовал условию: state.arr !== return state.arr. Например, этот код тоже работает. const arr = Array.from(state.arr); arr.push(action.payload); возврат {обр};

i like Cola 23.04.2022 17:10

Другие вопросы по теме