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

Question

我需要一些帮助来理解为什么可以在索引 [0] 处访问我的数据，但是一旦我尝试访问其上的键，它就会返回未定义的错误。我的数据的初始状态是一个空数组。我已经确认从响应中返回的确实是一个长度为 1 的数组，其中包含一个对象。应用程序.jsximport 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;评论.jsximport 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 }) => {

  // you can still add a debug line up here. that won't be an issue

  console.log(listingData);

  const reviews = listingData.length ? listingData[0].listing_reviews : null;

  return (

    <div>

      {reviews}

    </div>

  )

}

export default Reviews;