使用 React 在挂钩内调用 function 时挂起 Promise

Question

我正在使用 axios 从 API（对象的 arr）中提取数据，但由于某种原因，当我在挂钩中调用它时，我一直在等待 promise。

我使用 promise 链接来确保代码同步执行但它仍然是相同的。

例如，当我使用“console.log(selectedVideo[0]”时，我得到“undefined”。我认为这是因为它在完成提取数据之前调用了 API，对吗？

    const url = `${baseURL}videos?api_key=${apiKEY}`;

    const fetchData = axios
        .get(url)
        .then((resp) => setSelectedVideo(resp.data));

    useEffect(() => {
        fetchData();
    }, []);

    // sets the state for the video
    const [selectedVideo, setSelectedVideo] = useState(fetchData);

    console.log(selectedVideo);

Answer 1

这段代码将在每个组件重新渲染时执行，即使fetchData结果不是function ，它也是undefined的（从setSelectedVideo返回），您需要将fetchData变为 function。

此外，由于数据来自API ，您需要为null state一个empty object

我认为你正在寻找的是。

    const url = `${baseURL}videos?api_key=${apiKEY}`;

    const fetchData = () => axios
        .get(url)
        .then((resp) => setSelectedVideo(resp.data));

    useEffect(() => {
        fetchData();
    }, []);

    const [selectedVideo, setSelectedVideo] = useState(null);