Почему мой топор ios не всегда работает в React - PullRequest
Новая
       14

Почему мой топор ios не всегда работает в React

0 голосов
/ 09 июля 2020

Я пытаюсь получить данные из API-интерфейса blogger. 

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

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

Затем проверьте, есть ли статьи (в моем блоге). Проверьте, есть ли изображение в содержимом блога, если да, передайте его реквизитам. 

    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 сообщений ('получить' или 'не получить').

Вы можете сказать мне, если я что-то пропустил?

1 Ответ

4 голосов
/ 09 июля 2020

Вы должны попытаться передать пустой массив в качестве второго аргумента в useEffect, чтобы функция запускалась только один раз после первоначального рендеринга: 

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

Из документов React:

Если вы хотите запустить эффект и очистить его только один раз (при монтировании и размонтировании), вы можете передать пустой массив ([]) в качестве второго аргумента. Это сообщает React, что ваш эффект не зависит от каких-либо значений из свойств или состояния, поэтому его никогда не нужно запускать повторно. Это не рассматривается как особый случай - это напрямую следует из того, как всегда работает массив зависимостей.

...