时间戳

首页 > 解决方案 > 从后端获取数据但无法在反应中访问它

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

问题描述

我使用 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({})，但同样的错误出现了。请帮助我从源中访问数据。谢谢

标签： node.jsreactjs

解决方案

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

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>;
}

推荐阅读