Передача реквизита с асинхронными данными

Question

Я задаюсь вопросом, как правильно пропустить реквизиты, а затем отобразить их, когда реквизиты должны быть извлечены первыми и не готовы при загрузке страницы.

map в настоящее время разрывает страницу, потому что массив не определен, когда страница загружается до того, как данные извлекаются и передаются как реквизиты.

Сводка событий:

1. Родительский компонент делает запрос API GET, который переводит ответ в состояние

2. Родительский компонент передает информацию из состояния в дочерний компонент (с именем SearchResults)

   <SearchResults results={this.state.results} />

Вот так выглядит дочерний компонент.

const SearchResults = (props) => {

    const items = props.results.items.map(item => {
        return (
            <div>{item.url}</div>
        )
    })

    return (
        <div className="results">
          <h3>Results:</h3>

        {items}

        </div>
    )
}

Я размышлял над следующим, но мне интересно, что является хорошим способом.

• Жизненный цикл, как componentDidMount() или componentWillReceiveProps()
• Использование оператора if для проверки того, определен ли реквизит, но ограничивает доступ к переменным внутри блока if
• Использование default props
• Будет ли загрузка реквизита в штат ребенка работать?

Answer 1

Как указывает @ Think-Twice, мы делаем предположение о состоянии родительского компонента.

В родительском компоненте нам нужно что-то вроде:

constructor() {
  this.state = {
    results: {items: []}
  }
}

Тогда в методе рендеринга мы можем сделать

{this.state.results.items.length ? <SearchResults results={this.state.results} /> : null}

Таким образом, компонент не будет отображаться, пока не будут получены некоторые результаты.

Для дальнейшей проверки результатов вы можете установить проптипы на SearchResults, например:

import PropTypes from "prop-types";

SearchResults.propTypes = {
  results: PropTypes.shape({
    items: PropTypes.array
  })
}

Answer 2

Похоже, ваш Api возвращает объект, поэтому при инициализации конструктор приводит как объект, а не как массив. Приведенная ниже условная проверка убедится, что она не выдает никаких ошибок, если для результатов установлено значение undefined по ответу Api или результаты не содержат элементов или элементы не являются массивом. Таким образом, эти условные проверки должны быть более безопасными, чтобы убедиться, что результаты являются объектом и содержат ключ items, а items - массив.

Если вы непосредственно проверяете this.state.results.items, то, когда ответ Api не содержит ключ элементов, код не будет выполнен или элементы не являются массивом, код не будет выполнен, поэтому перед выполнением .map следует выполнить необходимые проверки.

const SearchResults = (props) => {
    const { results } = props;
    const items = results && results.items && Array.isArray(results.items) && props.results.items.map(item => {
        return (
            <div>{item.url}</div>
        )
    })

    return (
        <div className="results">
          <h3>Results:</h3>

        {items}

        </div>
    )
}