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

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

Мои кодыandbox

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

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
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

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