Я довольно новичок, чтобы реагировать и реагировать на Маршрутизатора. Так что, пожалуйста, держись со мной :-). У меня проблемы с рендерингом динамического c меню ReactRouter.
У меня есть компонент, <MyApp />. В componentDidMount() методе <MyApp /> я вызываю API. API возвращает массив статей. Затем я устанавливаю состояние <MyApp /> с этими новыми статьями.
.....
this.setState({
isLoaded: true,
articles: result
});
Теперь я загружаю новый компонент, <ArticlePage articles={this.state.articles} />
Небольшая касательная - этот новый <ArticlePage /> сделан с компонентом функции, а не компонентом класса. Причина в том, что у меня были проблемы с использованием ReactRouter внутри компонентов класса.
function ArticlePage(props){}... теперь существует. Props содержит мой массив статей.
Внутри ArticlePage(), я хочу создать ссылкуactRouter для каждой из статей в массиве, которые я передаю как реквизиты. Вот где у меня проблемы.
В моей голове мне нужно l oop над каждым из элементов props.articles массива и создать элемент ссылкиactRouter ..
<ul>
{props.articles.map(item =>
(
<li>
<Link to={`${url}/${item.article_id}`}>{item.title}</Link>
</li>
))}
</ul>
Проблема в том, что мои ссылки не отображаются на странице. Отладка предполагает, что когда рендеринг страницы и запуск .map l oop выше, массив пуст. Используя инструменты разработчика Chrome, я вижу, что props.article для этого компонента действительно содержит все статьи. Тем не менее, я, конечно, смотрю на этот объект медленнее, чем при отрисовке страницы, поэтому он успел завершить.
Что это, что я делаю неправильно? Возможно, мне следует загружать и передавать состояние статей по-другому?
Спасибо за вашу помощь.