19
Апр
2021

useEffect выполняется не всегда

Есть компонент:

function Blogs(props) {
    const [links, setLinks] = useState([]);

    function getBlogs() {
        const ids = props.ids;
        for (const id of ids) {
            getBlog(id).then(blog => setLinks([...links, <Link to={`/blog/${id}`}>{blog.name}</Link>]));
        }
    }

    async function getBlog(id) {
        let data = await fetch(`${root}/api/blog/${id}`);
        data = await data.json();
        const blog = data.blog;
        return blog;
    }

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

    return (
        <div className="profile-blogs">
            <div className="a">Блоги</div>
            <div className="b">
                {links}
            </div>
        </div>
    );
}

links - это массив с jsx-ссылками. Link экспортировано из react-router-dom. Проблема в том, что useEffect выполняется не всегда, то-есть часто при вызове компоненты useEffect просто не отрабатывает. У меня есть предположение, что это из-за навигации react-router-dom'a, так как его ссылки не обновляют страницу, но я понятия не имею, как это исправить.

Источник: https://ru.stackoverflow.com/questions/1272270/useeffect-%D0%B2%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D1%8F%D0%B5%D1%82%D1%81%D1%8F-%D0%BD%D0%B5-%D0%B2%D1%81%D0%B5%D0%B3%D0%B4%D0%B0

Тебе может это понравится...

Добавить комментарий