React useState 设置来自数据库的响应，但是当我尝试访问数据 [0].listing_reviews 时，它返回一个未定义的错误

Question

I need some help understanding why my data can be accessed at index[0] but as soon as I try to access a key on it, it returns an undefined error. The initial state of my data is an empty array. I've confirmed that what I get back from the response is indeed an array of length 1 with an object inside of it.

App.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;

Review.jsx

import React, { useState } from 'react';

const Reviews = ({ listingData }) => {

  return (
    <div>
      {console.log(listingData[0].listing_reviews)}
    </div>
  )
}

export default Reviews;

So right now, if I console.log(listingData[0]) it works no problem and returns an object with the following structure:

listing_id: 0,

listing_rating: 1.5,

listing_reviews: [] <---Full of objects

As soon I try to access one of those keys it fails by giving me an undefined error. Please let me know if you would like some more info as well. Thank you.

Answer 1

The problem is that you're rendering the result of console.log in your Reviews.jsx file. Anything you put in curly braces {} in JSX, React will render. So if you call a function, React will try to render the return value of that function. React throws an error if you try to render undefined . And since console.log always returns undefined , you're always going to get an error. Even if you eventually have data in your listingData prop, since you're still trying to render the return of console.log and it still returns undefined , you'll get an error.

So, just get rid of the console.log . Also, you will probably want to check that you actually have data in your listingData prop. Otherwise you'll get an error before your data actually loads.

So, something like this for your Reviews.jsx file:

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;