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

Question

[n1ksON]

Всем привет!
Имеется три объекта, соответствующие трём кнопкам. При клике на любую из них, состояние должно обновиться. Всего бывает 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
        }
      })
    })
  }

Подскажите, что не так?

Answer 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: ... })

Comments

[n1ksON]

Вышло:

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

Ошибка: Expected an assignment or function call and instead saw an expression

[i1yas]

n1ksON, да, не углядел
надо:

if (data.id === Number(id)) {
          return (data.state === 2) ? {...data, state: 0} : {...data, state: data.state + 1}          
        }
        return data
}

[i1yas]

n1ksON, немного опечатался, хотя оно и так работоспособно
должно быть так

if (data.id === Number(id)) {
      return (data.state === 2) ?
          {...data, state: 0} :
          {...data, state: data.state + 1}  
}
return data;

return нужен, потому что так работает map
по умолчанию возращается data, но если условие сработало, то возвращать модифицированный вариант data

[n1ksON]

i1yas, спасибо

[WbICHA]

А ещё данный код можно переписать так:

return prev.map(data => data.id === +id ? { ...data, state: (data.state + 1) % 3 : data);

Answer 2

[Loli E1ON]

каллбек в setStates должен возвращать новый стейт