How to access the values of a nested object in an array, it keeps saying Uncaught TypeError: Cannot read properties of undefined

Question

我正在尝试访问数组中嵌套对象的值，我正在从 API 获取数据。当我尝试将数据记录到控制台时，它总是只显示此错误，“未捕获的 TypeError 无法读取属性”

这是代码..

export const ItemPage = () => {

    const {id} = useParams(); 
    const url = `http://localhost:8000/details/${id}`
    const [data, setData] = useState({});
    

    useEffect(() => {
        console.log("page just loaded")
         getData();
     
    },  []);
        
    const getData = async() => {
        await axios.get(url)
        .then((res)=> { 
            setData(res.data); 
            })
        .catch((err) => console.log(err));
    }

        const newData = data.breeds;
  return (

    <div className='py-4 space-y-12'>
            <div className=' w-screen h-fit grid lg:flex md:flex justify-around px-12'>
                <div >
                    <img  className='w-72 h-56 rounded-2xl' src={data.url} alt="" />
                </div>
            <div className=' w-full lg:w-1/2 md:w-1/2 px-4 space-y-2 pt-6 lg:pt-0 '>
                <p className='text-xl'><strong>{newData[0].name}</strong></p>
                <p className='text-xs lg:text-sm'>{newData[0].description}</p>
                <p className='text-xs lg:text-sm md:text-sm'><b>Temperament</b>: {newData[0].temperament}</p>
                <p className='text-xs lg:text-sm md:text-sm'><b>Origin</b>: {newData[0].origin}</p>
                <p className='text-xs lg:text-sm md:text-sm'><b>Life Span</b>: {newData[0].life_span}</p>
                <p  className='text-xs lg:text-sm md:text-sm'><b>Affection level:</b>{newData[0].affection_level}</p>
                <p  className='text-xs lg:text-sm md:text-sm'><b>Child Friendly:</b>{newData[0].child_friendly}</p>
                <p  className='text-xs lg:text-sm md:text-sm'><b>Grooming:</b>{newData[0].grooming}</p>
                <p  className='text-xs lg:text-sm md:text-sm'><b>Intelligence:</b>{newData[0].intelligence}</p>
                <p  className='text-xs lg:text-sm md:text-sm'><b>Health Issue:</b>{newData[0].health_issue}</p>
                <p  className='text-xs lg:text-sm md:text-sm'><b>Social Needs:</b>{newData[0].social_needs}</p>
                <p  className='text-xs lg:text-sm md:text-sm'><b>Stranger friendly:</b>{newData[0].stranger_friendly}</p>
             </div>

            </div> 
               
    </div>
  )
}

Answer 1

您试图在实际加载数据之前在模板中呈现数据，因此访问任何属性 newData 都会引发错误； getData 在模板呈现后触发，但在呈现期间访问 newData；您没有以正确的方式处理异步加载的数据；一个可能的解决方案是使用内部状态：

const [newData, setNewData] = useState({});
useEffect(() => {
   getData()
   .then(data =>
      setNewData(data)
   );
}, [])

然后在您的模板中您可以正确使用 newData

带有一些示例的不错的指南：https://www.digitalocean.com/community/tutorials/how-to-handle-async-data-loading-lazy-loading-and-code-splitting-with-react

除此之外你需要考虑到你的状态变量被初始化为一个空对象（传递给 useState 的参数）所以在你的模板中你可以安全地做 {newData.aaa}因为 newData 是 {} 并且 newData.aaa 是未定义的，但不是 {newData.bbb.ccc} 因为它会抛出 (newData.bbb = undefined and cannot read 属性 ccc of undefined);为此，您应该为子对象定义一个状态变量，例如 const [subBBB, setSubBBB] = useState({})

    useEffect(() => {
   getData()
   .then(data =>
      setNewData(data)
      setSubBBB(data.bbb)
   );
}, [])

现在可以安全访问 {subBBB.ccc} 这显然只是一个可能的解决方案，另一个是将状态初始化为 {bbb: undefined}...

How to access the values of a nested object in an array, it keeps saying Uncaught TypeError: Cannot read properties of undefined

How to access the values of a nested object in an array, it keeps saying Uncaught TypeError: Cannot read properties of undefined

javascript

reactjs

use-state