React useState 设置来自数据库的响应，但是当我尝试访问

Question

我需要一些帮助来理解为什么可以在索引 [0] 处访问我的数据，但是一旦我尝试访问其上的键，它就会返回未定义的错误。我的数据的初始状态是一个空数组。我已经确认从响应中返回的确实是一个长度为 1 的数组，其中包含一个对象。

应用程序.jsx

import React, { useState, useEffect } from 'react';

import Reviews from './Reviews.jsx';

import axios from 'axios';

const ReviewsApp = () => {

  const [listingData, setlistingData] = useState([]);

  useEffect(() => {

    let id = Math.floor(Math.random() * 100) + 1 // Random Test ids

    axios

      .get(`listings/${id}/reviews`)

      .then(res => setlistingData(res.data))

      .catch(err => console.log(err));

  }, []);

  return (

    <div>

      <Reviews listingData={listingData}/>

    </div>

  );

};

export default ReviewsApp;

评论.jsx

import React, { useState } from 'react';

const Reviews = ({ listingData }) => {

  return (

    <div>

      {console.log(listingData[0].listing_reviews)}

    </div>

  )

}

export default Reviews;

所以现在，如果我 console.log(listingData[0]) 它工作没有问题并返回具有以下结构的对象：

listing_id: 0,

listing_rating: 1.5,

listing_reviews: [] <---Full of objects

当我尝试访问其中一个键时，它会失败并给出未定义的错误。如果您还想了解更多信息，请告诉我。谢谢。

Answer 1

console.log问题是您正在Reviews.jsx 文件中呈现结果。在 JSX 中放入大括号中的任何内容{}，React 都会渲染。因此，如果你调用一个函数，React 将尝试渲染该函数的返回值。如果您尝试渲染，React 会抛出错误undefined。由于console.log总是返回undefined，所以你总是会得到一个错误。即使您最终在listingDataprop 中有数据，由于您仍在尝试渲染返回值console.log并且它仍然返回undefined，因此您会收到错误。所以，只要摆脱console.log. 另外，您可能需要检查道具中是否确实有数据listingData。否则，在数据实际加载之前您会收到错误消息。所以，你的文件是这样的Reviews.jsx：import React, { useState } from 'react';const Reviews = ({ listingData }) => {&nbsp; // you can still add a debug line up here. that won't be an issue&nbsp; console.log(listingData);&nbsp; const reviews = listingData.length ? listingData[0].listing_reviews : null;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {reviews}&nbsp; &nbsp; </div>&nbsp; )}export default Reviews;