试图返回 api 数据并返回未定义的值答案

【问题标题】：Trying to return api data and returning undefined values试图返回 api 数据并返回未定义的值
【发布时间】：2021-05-04 01:31:13
【问题描述】：

我正在尝试从工单主 API 呈现数据。它出现在 console.log 中，但是当我在 card>img>src 和 title 中调用它时，我得到了未定义的值和错误。

const Cards = (props) => {

  const apiUrl = 'https://app.ticketmaster.com/discovery/v2/events.json?apikey=7elxdku9GGG5k8j0Xm8KWdANDgecHMV0'
  
  
  const [api, setApi] = useState(null)
  const getApi = async () => {
    const response = await fetch(apiUrl);    
    const data = await response.json();
    setApi(data);
    console.log(data._embedded.events[0].name)
  };
  useEffect(() => {
    getApi(api);
  }, []);

  

    const numArr = [1,2,3]
    return (
        <div className ='Cards'>
            {
                numArr.map((data, index) => (
                    <div>
                    <Card>
                      <CardImg top width="100%" src={`data._embedded.events[0].images[7]`} alt="Card image cap" />
                      <CardBody>
                        <CardTitle tag="h5"></CardTitle>
                        <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
                        <CardText>
                          <small className="text-muted">Put some text here</small>
                        </CardText>
                      </CardBody>
                    </Card>
                  </div>
                ))
            }
        </div>
    )  
}

【问题讨论】：

您正在通过 numArr 进行映射，这是一个具有 [1,2,3] 的简单数组。因此，当您映射它时，您的数据将是 1，然后是 2，然后是 3。因此它不会指向您所在州内的“数据”，请尝试将地图更改为 numArr.map((_, index) => {。 ..} ) 看看它会给你什么

标签： reactjs api

【解决方案1】：

您的代码中的numArr 是一个数字数组，Array 方法Array.map 接收一个回调，其中第一个参数是数组的一个元素，第二个参数是它的索引。

当尝试将图像 src 传递给 CardImg 组件时，您将传递 data._embedded.events[0].images[7]。

但是"data" 这里是一个数字，是numArr 的元素，所以，在运行代码时，javascript 会抛出类似cannot read property 'events' of undefined 的错误，因为_embedded 不是数字类型的属性。

不清楚您是否尝试映射 event.images 或 _embedded.events，但我认为您正在尝试这样做。

const Cards = (props) => {

  const apiUrl = 'https://app.ticketmaster.com/discovery/v2/events.json?apikey=7elxdku9GGG5k8j0Xm8KWdANDgecHMV0'


  const [api, setApi] = useState(null)
  const getApi = async () => {
      const response = await fetch(apiUrl);    
      const data = await response.json();
      setApi(data);
      console.log(data._embedded.events[0].name)
  };
  useEffect(() => {
    getApi(api);
  }, []);


  return (
    <div className ='Cards'>
        {
            api._embedded.events[0].images.map((src, index) => (
                <div>
                <Card>
                  <CardImg top width="100%" src={src} alt="Card image cap" />
                  <CardBody>
                    <CardTitle tag="h5"></CardTitle>
                    <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
                    <CardText>
                      <small className="text-muted">Put some text here</small>
                    </CardText>
                  </CardBody>
                </Card>
              </div>
            ))
        }
    </div>
)

}

【讨论】：

【解决方案2】：

您在 img 标签中的调用数据不是全局变量只需使用 api 变量，因为您将数据分配给它

          <CardImg top width="100%" src={api._embedded.events[0].images[7]} alt="Card image cap" />

【讨论】：