从后端获取数据但无法在反应中访问它

Question

我已经使用 nodejs 和 xampp 创建了一个服务器。 从那里，我通过 React 作为前端获取数据。 数据正在记录在控制台中，但是当我尝试访问这些值时，它显示为无法读取未定义的属性。

这是后端API的结果

[{"id":1,"Featured":"true","Ratings":5}]

这是前端的代码

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

export default function QueryData() {
  const [backenddata, setBackenddata] = useState([]);

  async function fetchData(url) {
    const response = await fetch(url);
    const result = await response.json()
    setBackenddata(result);
  }

  useEffect(() => {
    let url = "http://localhost:3001/";
    fetchData(url);
  }, []);

  console.log(backenddata[0]) // This is result {"id":1,"Featured":"true","Ratings":5}
  console.log(backenddata[0].id)  // Error -> TypeError: Cannot read property 'id' of undefined
  console.log(backenddata[0].Featured)  // Error -> TypeError: Cannot read property 'Featured' of undefined

  return <div>backenddata</div>;
}

我已经尝试过 useState() 和 useState({})，但是出现了同样的错误。请帮助我从源中访问数据。 谢谢

Answer 1

useEffect在初始渲染之后运行，因此最初您将获得useEffect下面的console.log语句的以下输出

console.log(backenddata[0])              // undefined
console.log(backenddata[0].id)           // Error
console.log(backenddata[0].Featured)     // Error

在初始渲染之后， useEffect执行并更新状态，这会导致重新渲染您的组件。 当组件重新渲染时， console.log语句将正确输出数据，但问题是在初始渲染期间抛出错误，因为您试图访问尚不存在的对象的属性。

解决方案：

• 您可以使用Optional chaining (?.)

   console.log(backenddata[0]?.id) console.log(backenddata[0]?.Featured)

• 在fetchData函数中记录数据

  export default function QueryData() { const [backenddata, setBackenddata] = useState([]); async function fetchData(url) { const response = await fetch(url); const result = await response.json(); console.log(result[0]); console.log(result[0].id) ; console.log(result[0].Featured); setBackenddata(result); } useEffect(() => { let url = "http://localhost:3001/"; fetchData(url); }, []); return <div>backenddata</div>; }