Question

我试图将视频状态设置为api响应的项目数组，但是当我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

很抱歉，由于钩子，您无法在videos调用之后登录setVideos，因为setVideos是异步的。

要获取videos的最后一个值，必须以这种方式使用useEffect钩子：

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

Answer 2

TLDR

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

答案

反应钩子就是这样

setState
计划渲染组件（我是指状态已更改的组件）
并以更改后的状态进行渲染

因此，您无法在该console.log(video)上访问视频

参考

Answer 3

您正在使用chqrlie$ ./sieve4780 Enter number as a limit: 25 Prime numbers between 1 and 25 are: 2 3 5 7 11 13 17 19 23 chqrlie$ ./sieve4780 Enter number as a limit: 83 Prime numbers between 1 and 83 are: 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79，因此应该是

async/await

useState react挂钩未设置数组状态

3 个答案:

TLDR

答案

参考