为什么我的 axios 并不总是在 React 中工作答案

【问题标题】：Why my axios get not always working in React为什么我的 axios 并不总是在 React 中工作
【发布时间】：2020-07-09 06:36:34
【问题描述】：

我尝试从博客 api 获取数据。

const NajnowszeWpisy = () => {
    const [articles, setArticles] = useState([]);

    useEffect(() => {
        axios
            .get(
                'https://www.googleapis.com/blogger/v3/blogs/****/posts?key=****'
            )
            .then((res) => {
                setArticles(res.data.items);
            });
    });

然后检查是否有任何文章（在我的博客中）。检查博客内容中是否有图片，如果有，传递给props。

    if (articles.length) {
        console.log('get');
        let image = '';
        const lastPost = articles[articles.length - 1];

        if (lastPost.content.match(/<img\s+[^>]*src="([^"]*)"[^>]*>/i)) {
            image = ReactHtmlParser(
                lastPost.content.match(/<img\s+[^>]*src="([^"]*)"[^>]*>/i)[0]
            );
        }

        return (
            <StyledContainer>
                <Post
                    image={
                        image ? (
                            image
                        ) : (
                            <img src={defaultImage} alt="default-img" />
                        )
                    }
                    title={lastPost.title ? lastPost.title : 'Nowy Artykuł'}
                    content={lastPost.content}
                    id={lastPost.id}
                    key={lastPost.id}
                />
            </StyledContainer>
        );
    } else {
        console.log('no get');
    }
};

作为响应，我收到错误 GET 429，因此请求太多。

我也无法收到任何console.log 消息（'get' 或'no get'）。

如果我错过了什么，你能告诉我吗？

【问题讨论】：

第二个 sn-p 的所有代码在哪里？请包含完整的代码示例。
这能回答你的问题吗？ Infinite loop in useEffect
首先，您在 useEffect 末尾缺少一个尾随数组。如果您在 setArticles 之前使用 console.log，您可能会注意到您正在通过调用锤击 API。也许 API 阻止了你？如果你放入一个空数组，你只会渲染（使用 GET 一次）。
发生这种情况是因为每次渲染后都会触发 useEffect，这会导致无限循环，要使您的 useEffect 只运行一次，请传递一个空数组 [] 作为第二个参数。仅供参考：由于你的无限循环 axios 总是从那里发送请求，你会得到429 Too Many Requests response。

标签： javascript reactjs api get axios

【解决方案1】：

您应该尝试将一个空数组作为第二个参数传递给useEffect，以便在初始渲染后只运行一次您的函数：

useEffect(() => {
    axios
        .get(
            'https://www.googleapis.com/blogger/v3/blogs/****/posts?key=****'
        )
        .then((res) => {
            setArticles(res.data.items);
        });
}, []);

来自 React 文档：

如果你想运行一个效果并且只清理一次（在挂载和 unmount)，您可以传递一个空数组 ([]) 作为第二个参数。这告诉 React 你的效果不依赖于 props 的任何值或状态，因此它永远不需要重新运行。这不作为特殊处理 case — 它直接遵循依赖项数组的方式有效。

【讨论】：

谢谢，现在我的 429 GET 错误消失了，但 lastPost 仍然未定义
您应该检查您的 Google 请求是否返回 JSON，该 JSON 是否有一个 items 键，您的 articles 是否已设置（在您的 useState() 之后添加一个 console.log）。