[英]How to update state with the useState hook
我有一个看起来像这样的默认状态:
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);
这里不需要箭头函数。 只需访问普通对象selectedFilters
并传递movie
的更新值,创建一个新对象,并将这个新对象传递给setSelectedFilters
:
setSelectedFilters({...selectedFilters, movie: e.target.value});
顺便说一句,基于 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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.