Первый блок кода - это мой родительский компонент
const [articleState, setArticles] = useState({
articles: [],
isFetching: false
});
useEffect(() => {
const url = ---MYURL---;
const fetchArticles = async () => {
try {
setArticles({ articles: articleState.articles, isFetching: true });
const response = await fetch(url);
const data = await response.json();
setArticles({ articles: data.response.docs, isFetching: false });
} catch (e) {
console.log(e);
setArticles({ articles: articleState.articles, isFetching: false });
}
};
fetchArticles();
//eslint-disable-next-line
}, []);
При рендеринге я передаю массив статей из состояния
<Articles articles={articleState.articles} loading={articleState.isFetching} />
Массив передается компоненту как статьи в Блок кода ниже.
import React from "react";
import { Link } from "react-router-dom";
const Articles = ({ articles, loading }) => {
if (loading) return <h2>loading...</h2>;
return (
<ul>
{articles.length !== 0
? articles.map((article, index) => (
<li
key={`${index}__${article.print_section}__${article.print_page}__${article._id}`}
>
<Link path={`/${article.headline.main}`}>
{article.headline.main}
</Link>
</li>
))
: null}
</ul>
);
};
Аргумент article.headline.main в дочернем элементе отображается нормально, но для поддержки в Link я получаю неопределенную ошибку в консоли.
Warning: Failed prop type: The prop `to` is marked as required in `Link`, but its value is `undefined`.