我正在尝试学习钩子,该useState方法使我感到困惑。我正在将初始值分配给数组形式的状态。useState即使使用spread(...)或,in中的set方法对我也不起作用without spread operator。我在另一台PC上创建了一个API,该API正在调用并获取要设置为状态的数据。
useState
spread(...)
without spread operator
这是我的代码:
import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const StateSelector = () => { const initialValue = [ { category: "", photo: "", description: "", id: 0, name: "", rating: 0 } ]; const [movies, setMovies] = useState(initialValue); useEffect(() => { (async function() { try { //const response = await fetch( //`http://192.168.1.164:5000/movies/display` //); //const json = await response.json(); //const result = json.data.result; const result = [ { category: "cat1", description: "desc1", id: "1546514491119", name: "randomname2", photo: null, rating: "3" }, { category: "cat2", description: "desc1", id: "1546837819818", name: "randomname1", rating: "5" } ]; console.log(result); setMovies(result); console.log(movies); } catch (e) { console.error(e); } })(); }, []); return <p>hello</p>; }; const rootElement = document.getElementById("root"); ReactDOM.render(<StateSelector />, rootElement);
setMovies(result)以及setMovies(...result)不工作。可以在这里使用一些帮助。
setMovies(result)
setMovies(...result)
我希望将结果变量推入movies数组中。
类似于通过扩展React.Component或创建的Class组件中的setState,React.PureComponent使用useState钩子提供的更新程序的状态更新也是异步的,不会立即反映和更新,但会触发重新渲染
React.Component
React.PureComponent
setMovies(result); console.log(movies) // movies here will not be updated
如果要对状态更新执行操作,则需要使用useEffect钩子,就像componentDidUpdate在类组件中使用一样,因为useState返回的setter没有回调模式
componentDidUpdate
useEffect(() => { // action on update of movies }, [movies]);
就更新状态的语法而言,setMovies(result)将状态中的先前movies值替换为异步请求中可用的值
movies
但是,如果要将响应与先前存在的值合并,则必须使用状态更新的回调语法以及正确使用的扩展语法,例如
setMovies(prevMovies => ([...prevMovies, ...result]));