我正在尝试学习钩子,而useState方法使我感到困惑。我正在将初始值分配给数组形式的状态。即使使用spread(...)
或,useState中的set方法对我也不起作用without spread operator
。我在另一台PC上制作了一个API,我正在调用它并提取要设置为状态的数据。
这是我的代码:
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)
不工作。可以在这里使用一些帮助。提前致谢。
我希望将结果变量推入movies数组中。
类似于通过扩展
React.Component
或创建的Class组件中的setState,React.PureComponent
使用useState
钩子提供的更新程序的状态更新也是异步的,不会立即反映和更新,但会触发重新渲染如果要对状态更新执行操作,则需要使用useEffect钩子,就像
componentDidUpdate
在类组件中使用一样,因为useState返回的setter没有回调模式就更新状态的语法而言,
setMovies(result)
将状态中的先前movies
值替换为异步请求中可用的值但是,如果要将响应与先前存在的值合并,则必须使用状态更新的回调语法以及正确使用的扩展语法,例如