@n1ksON
Freelance

Что не так с функцией изменения состояния?

Всем привет!
Имеется три объекта, соответствующие трём кнопкам. При клике на любую из них, состояние должно обновиться. Всего бывает 3 состояния.
Но функция changeState работает через одно место, точнее толком и не работает. Хотел, чтобы функция брала state кнопки, на которую нажал и увеличивала его на 1 (если это 2, то обнулить).
Функция работает только один раз, затем ошибка: Cannot read property 'map' of undefined
const [states, setStates] = useState([
    { id: 1, state: 0 },
    { id: 2, state: 0 },
    { id: 3, state: 0 }
  ])

const changeState = ({ id }) => {
    setStates(prev => {
      prev.map(data => {
        if (data.id === Number(id)) {
          (data.state === 2) ? data.state = 0 : ++data.state
        }
      })
    })
  }

Подскажите, что не так?
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
@i1yas
setStates(prev => {
      prev.map(data => {
        if (data.id === Number(id)) {
          (data.state === 2) ? data.state = 0 : ++data.state
        }
      })
    })


Функция передаваемая в setStates не возвращает ничего, просто делает map и забывает результат, соотвественно в стейт ложится undefined, у которого метода .map нет, о чем и говорит ошибка
Нужно добавить:
return prev.map...

В map вы делаете похожу ошибку, плюс еще зачем-то мутируете данные.
if (data.id === Number(id)) {
          (data.state === 2) ? data.state = 0 : ++data.state
        }

Все что не попадет под это условие станет undefined, т.е. у вас массив будет такой структуры [,,,{},]
Внутри map надо переписать так:
data => {
        if (data.id === Number(id)) {
          return (data.state === 2) ? {...data, state: 0} : {...data, state: data.state + 1}          
        }
        return data
}


Посмотрите про синтакс стрелочных функций, если не знаете.
Без фигурных скобок () => expression
C фигурными скобками () => { return expression }
Возрат объекта () => ({ someObjectField: ... })
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
E1ON
@E1ON
web, gamedev, anime, science
каллбек в setStates должен возвращать новый стейт
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы