如何使用 useState 挂钩更新状态答案

【问题标题】：How to update state with the useState hook如何使用 useState 挂钩更新状态
【发布时间】：2020-05-31 16:46:25
【问题描述】：

我的默认状态如下所示：

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

如何将电影值更新为其他值。我试过这个：

  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);

【问题讨论】：

标签： javascript reactjs state

【解决方案1】：

这里不需要箭头函数。只需访问普通对象selectedFilters 并传递movie 的更新值，创建一个新对象，并将这个新对象传递给setSelectedFilters：

setSelectedFilters({...selectedFilters, movie: e.target.value});

【讨论】：

【解决方案2】：

顺便说一句，基于 React 文档，建议拆分为多个状态变量。 https://reactjs.org/docs/hooks-state.html#tip-using-multiple-state-variables.

以下内容应该适用于您的场景。

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);
};

【讨论】：