Как я могу создать несколько компонентов React из JSON и вернуть их одновременно? - PullRequest
Новая
       12

Как я могу создать несколько компонентов React из JSON и вернуть их одновременно?

1 голос
/ 03 апреля 2019

Я пытаюсь создать компонент, который будет выполнять вызов API, чтобы получить данные о диджеях, и использовать их для создания карт ReactStrap и вернуть эти карты в родительский div flexbox.

Сначала я подумал о множестве разных способов сделать это, но метод, который я решил сделать (и я не уверен, так ли это должно быть), состоит в том, чтобы хранить данные для каждая карта в виде массива в состоянии моего компонента.

Позже я буду использовать данные для построения карт с использованием функции map в массиве и сохранения этих компонентов в переменной, которая будет возвращена в другом div flexbox. 

import React from 'react'
import DjCard from "./DjCard"


class CreateDjCards extends React.Component {
  constructor() {
    super()
    this.state = {
      data: []
    }
  }

  componentDidMount() {
    fetch("URL")
      .then(JSON.stringify)
      .then(JSON.parse)
      .then((response) => this.setState({
        data: response.items
      }))
  }

  render() {
    let styles = {
      display: "flex",
      flexWrap: "wrap"
    }

    let cards = this.state.data.map( (item) => {
      return <DjCard data={item}/>
    })

    return(
      <div style={styles}>
        {cards}
      </div>
    )
  }
}

export default CreateDjCards

Когда я делаю это, он успешно компилируется, но я получаю ошибку «TypeError: Невозможно прочитать свойство« map »из undefined». Я ожидал флексбокс, содержащий карточки каждого предмета, описанного в JSON.

Каков типичный способ построения множества компонентов из данных API и их возврата / Что я делаю неправильно? Спасибо!

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Привет, да, похоже, что response.items имеет значение null, попробуйте зарегистрировать выходные данные ответа и затем установите его правильно, в основном это будет response.data.items, но все равно проверьте после регистрации.

1 голос
/ 03 апреля 2019

В целом ваши настройки рендеринга компонентов DjCard довольно разумны, я думаю, вы уверены, что получаете массив обратно из API?Или это response.items что вы думаете?Может быть, items не определено?

В качестве примечания отметьте https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch, чтобы увидеть, как вы можете очистить цепочку .then при вызове выборки - вам не нужнозачеркнуть и разобрать ответ:)

...