Как обновить состояние с помощью ловушки useState - PullRequest
Новая
       5

Как обновить состояние с помощью ловушки useState

3 голосов
/ 16 февраля 2020

У меня есть состояние по умолчанию, которое выглядит так: 

const [selectedFilters, setSelectedFilters] = useState({movie: 'default' , species : 'default' , planet : 'default'});

Как мне обновить значение mov ie на что-то другое. Я попробовал это: 

  const handleMovieChange  = (e) => { 
    console.log(e.target.value)
    setSelectedFilters(prevState => ({ ...prevState, movie : e.target.value}));
  }

Однако, когда я изменяю значения, это дает мне: 

×
TypeError: Cannot read property 'value' of null
(anonymous function)
C:/Users/klmaa/OneDrive/Bureaublad/swcase/client/src/App.js:48
  45 | 
  46 |  const handleMovieChange  = (e) => { 
  47 |    console.log(e.target.value)
> 48 |    setSelectedFilters(prevState => ({ ...prevState, movie : e.target.value}));
     | ^  49 |  }
  50 | 
  51 |  console.log(selectedFilters);

Ответы [ 2 ]

2 голосов
/ 16 февраля 2020

Вам не нужна функция стрелки здесь. Просто получите доступ к обычному объекту selectedFilters и передайте обновленное значение для movie, создав новый объект, и передайте этот новый объект setSelectedFilters: 

setSelectedFilters({...selectedFilters, movie: e.target.value});
1 голос
/ 16 февраля 2020

Кстати, на основе документации React, рекомендуется разделить на несколько переменных состояния. https://reactjs.org/docs/hooks-state.html#tip -using-множественные-переменные состояния .

Следующее должно работать для вашего сценария. 

const [movie, setMovie] = useState("default");
const [species, setSpecies] = useState("default");
const [planet, setPlanet] = useState("default");

const handleMovieChange = e => {
  console.log(e.target.value);
  setMovie(e.target.value);
};
...