Состояние флажка Toggle не меняется Редуктор React

Я пытаюсь изменить состояние флажка при изменении, но оно не меняется. Похоже на эта картинка. Вот мой InitialState

const initialState = {
  isLoading: false,
  showAlert: false,
  products: [],
  totalProducts: 0,
  numOfPages: 1,
  select: false,
};

Вот мой контекстный код

  const toggleProduct = (e) => {
    const id = e.target.id;
    dispatch({ type: TOGGLE_PRODUCT, payload: { id } });
  };

Редуктор

if (action.type === TOGGLE_PRODUCT) {
    return {
      ...state,
      products: state.products.map((product) => {
        if (product._id === action.payload.id) {
          return { ...product, select: !state.select };
        } else {
          return product;
        }
      }),
    };
  }

И как посмотреть ввод

   <input
        type='checkbox'
        name={name}
        defaultChecked={select}
        id={_id}
        onChange={toggleProduct}
      />

Если ввод просто проверен, он не работает, ввод не выбран, но если defaultChecked, я могу выбрать ввод, но состояние не меняется (пожалуйста, посмотрите на скриншот). заранее спасибо

Итак, для каждого продукта в массиве products есть один флажок. Итак, если товаров 4, то и флажков будет 4. И, тем не менее, есть только одна переменная select логического флага, которая будет определять, отмечены или сняты все 4 флажка. Правильно ли я понимаю?

jsN00b 10.04.2022 02:35
Формы 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 вы передаете состояние или данные от одного...
0
1
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

@ jsN00b правильно указано в комментарии, состояние проверки всех четырех продуктов контролируется одним контролируемым элементом, а именно select key, но обычно каждый продукт должен иметь свой собственный атрибут select, например:

const initialState = {
  isLoading: false,
  showAlert: false,
  products: [ 
              // hard code the data for now
              {_id: 1, productName: "productOne", select: false},
              {_id: 2, productName: "productTwo", select: false},
              {_id: 3, productName: "productThree", select: false},
            ],
  totalProducts: 0,
  numOfPages: 1
  // select: false, ⬅ we don't need select in here now
};

// reducer
if (action.type === TOGGLE_PRODUCT) {
    return {
      ...state,
      products: state.products.map((product) => {
        if (product._id === action.payload.id) {
          return { ...product, select: !product.select }; // only toggle select for THE product
        } else {
          return product;
        }
      }),
    };
  }

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