#javascript #arrays #reactjs #object #ecmascript-6
#javascript #массивы #reactjs #объект #ecmascript-6
Вопрос:
У меня есть класс, в котором я должен проверить наличие элемента для отображения в одной html-форме (скажем, гиперссылка) или обычный текст.
Я получаю объект в качестве реквизита. Мне трудно использовать выборку, чтобы правильно распознать, существует ли элемент на основе кода возврата
this.props.item.map(function(item) {
fetch(url item)(). then (
if(statusCode === 200)
//display hyperlink
return <a href=url item>{item.a:item.b}</a>
else
//normal text
return <disp>{item.a:item.b}</disp>
)
// But its expecting a return here!
//return <disp>{item.a:item.b}</disp>
})
Комментарии:
1. почему вы используете map, если вы ничего не делаете с возвращаемыми значениями (не то, что вы возвращаете какие-либо) — map кажется неправильным выбором
2. Будьте осторожны при программной отправке запросов на пользовательские URL-адреса из вашего приложения, это может привести к некоторым рискам для безопасности. По крайней мере, похоже, что это пользовательские URL-адреса, если я правильно понимаю.
3. @JaromandaX Что бы вы порекомендовали мне использовать?
4. @PatrickRoberts , Да, это просто добавление к базовому URL. без xss
Ответ №1:
Проблема в том, что это асинхронный код.
У вас есть пара проблем:
Во-первых, (если я прав, предполагая, что это функция Array.prototype.map) .map функция должна что-то возвращать. Функция map преобразует один массив в другой массив того же размера.
Во-вторых, и это более важно, fetch возвращает Promise .
Поэтому, даже если вы изменили свой код на:
this.props.item.map(function(item) {
return fetch(url item)(). then (
if(statusCode === 200)
//display hyperlink
return <a href=url item>{item.a:item.b}</a>
else
//normal text
return <disp>{item.a:item.b}</disp>
)
})
Все, что вы получите, это массив обещаний.
Что я рекомендую вам сделать, так это начать использовать react-redux, и лично я рекомендую использовать redux-saga.
Основная концепция redux и других решений для управления состоянием заключается в том, что ваши компоненты React отвечают только за отображение данных и реагирование на взаимодействие с пользователем (обычно путем отправки действия redux). Они не должны нести ответственность за фактическую выборку или манипулирование данными. Для этого и предназначено ваше промежуточное программное обеспечение для управления состоянием (например, redux-saga).
Я не буду вдаваться в подробности здесь, но это должно направить вас в правильном направлении.
Комментарии:
1. Этот ответ правильный, но вам не нужно рекомендовать целую библиотеку для решения этой проблемы. Общий совет правильный, с дополнительным примечанием о том, что данные должны извлекаться внутри
componentDidMount()и в обратных вызовах пользовательских событий, а не вrender()методе.render()Функция должна обрабатывать отображение значка загрузки во время выполнения асинхронной выборки. Для этого вам не нужны react-redux или react-saga, они просто упрощают структуру таким образом.2. @PatrickRoberts — Конечно, это справедливое замечание, и оно отвечает на более насущный вопрос. Однако смешивание вашей выборки данных / бизнес-логики с вашими компонентами — это верный способ создать действительно беспорядочный и сложный в работе код.
3. И последнее замечание: когда пакет извлекаемых данных будет завершен, используйте
setState()метод после того, как все это загружено (скорее всего, с помощьюPromise.all()агрегирования ваших обещаний), чтобы дать указание компоненту React повторно отобразить себя, используя вновь доступные данные в его состоянии.4. Да, и одна вещь, которая мне нравится в react-redux, — это то, что она предоставляет способ записать вашу бизнес-логику в HOC, который можно использовать для создания вашего компонента, позволяя логике быть разделяемой. Но для компонента не жизненно важно работать с асинхронными источниками данных.