useState react钩子不设置数组状态

Question

我正试图将视频状态设置为api响应的items数组，但当我console.log视频时，它返回一个空数组。。。。以下是获取我在其中设置视频状态的api的代码

const [videos, setVideos] = useState([]);
const handleFormSubmit = async (searchterm) => {
await fetch(
`https://www.googleapis.com/youtube/v3/search?${params.toString()}&q=${searchterm}`
)
.then((response) => response.json())
.then((data) => {
console.log(data);
setVideos(data.items);
console.log(videos);
});
};

如何将项目数组设置为视频状态？

Answer 1

Ciao，不幸的是，使用钩子，您无法在setVideos调用后记录videos，因为setVideos是异步的。

要获得videos的最后一个值，必须使用useEffect钩子，方法如下：

useEffect(() => {
console.log(videos);
}, [videos]);

Answer 2

TLDR

React Hooks异步工作setState->render->state binding

答案

react钩子像一样工作

1. 设置状态
2. 计划渲染组件(我指的是状态已更改的组件(
3. 并以更改的状态进行渲染

所以，你无法在console.log(video)上访问视频

参考

1. 反应过度
2. 我的韩语媒体(你可以用谷歌翻译(
3. React Hooks如何重新渲染功能组件

Answer 3

您使用的是async/await，所以它应该是

const [videos, setVideos] = useState([])
const handleFormSubmit = async (searchterm) => {
const response = await fetch(
`https://www.googleapis.com/youtube/v3/search?${params.toString()}&q=${searchterm}`
)
const data = await response.json()
console.log(data)
setVideos(data.items)
console.log(videos)
}