Question

我正在尝试创建一个组件，该组件将进行API调用以获取有关DJ的数据，并使用它们来构造ReactStrap卡，并将这些卡返回到父级div flexbox中。

起初，我想到了很多不同的方法来执行此操作，但是我决定执行的方法（而且我不确定这是否应该这样做）是为了存储数据每张卡在我的组件状态下都是一个数组。

稍后，我将使用数据通过数组上的map函数构造卡片，并将这些组件存储在变量中，该变量将在另一个flexbox div中返回。

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'”。我希望有一个Flexbox，其中包含JSON中描述的每个项目的卡片。

从API数据构造大量组件并将其全部归还的典型方法是什么/我做错了什么？谢谢！

Answer 1

整个渲染DjCard组件的设置是非常合理的，我认为，您确定要从API中获得数组吗？还是response.items是您的想法？也许items未定义？

作为旁注，请查看https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch，以了解如何在提取调用中清理.then链-无需对响应进行字符串化和解析：）

Answer 2

嗨，是的，response.items似乎为空，请尝试记录response的输出，然后正确设置它，大多数情况下是response.data.items，但在登录后仍然检查。

如何从JSON构造多个React组件并立即返回？

2 个答案: