在 React 中使用 JSON 服务器显示数据答案

【问题标题】：Display data using JSON server in React在 React 中使用 JSON 服务器显示数据
【发布时间】：2021-10-01 04:18:45
【问题描述】：

我想从这个 json 文件中获取一些数据：

//db.json
{

    "percents": [
        {
            "id": "x3m1",
            "value": 1.05
        },
        {
            "id": "x6m1",
            "value": 1.1
        },
        {
            "id": "x9m1",
            "value": 1.15
        },
        {
            "id": "x12m1",
            "value": 1.2
        },
        {
            "id": "x3m2",
            "value": 1.04
        },
        {
            "id": "x6m2",
            "value": 1.08
        },
        {
            "id": "x9m2",
            "value": 1.12
        },
        {
            "id": "x12m2",
            "value": 1.16
        },
        {
            "id": "x3m3",
            "value": 1.03
        },
        {
            "id": "x6m3",
            "value": 1.06
        },
        {
            "id": "x9m3",
            "value": 1.09
        },
        {
            "id": "x12m3",
            "value": 1.12
        }
    ]
}

我在“http://localhost:8000/percents”的不同端口上启动了一个 json 服务器，并创建了一个这样的 api：

//api.js
import axios from "axios";
export const getValues = async () => {
return await axios.get("http://localhost:8000/percents");  
};

这是我的主要功能：

//App.js
import "./App.css";
import { useState, useEffect } from "react";
import { getValues } from "./api";

function App() {

  const [values, setValues] = useState([]);

  useEffect(() => {
    loadPercents();

  },[]);
  const loadPercents = () => getValues().then((v) => setValues(v.data));

  console.log(values);
  const fv = values.filter(x => x.id === "x3m1")
  console.log(fv[0].value);
  return (
    <div className="container mx-auto">
      <h1 className="text-4xl">Configuration</h1>
      <table>
        <tbody>


        </tbody>
      </table>

    </div>
  );
}

export default App;

问题是，当我第一次启动项目时，它的值显示在控制台中，然后保存时出现此错误：

TypeError: Cannot read property 'value' of undefined
App
E:/mouadh/projects/hello - Copie/hello1/src/App.js:20
  17 | //const loadBands = () => getBands().then((b) => setBands(b.data));
  18 | console.log(values);
  19 | const fv = values.filter(x => x.id === "x3m1")
> 20 | console.log(fv[0].value);
     | ^  21 | //console.log(bands);
  22 | //console.log(values[0].value)
  23 | return (

【问题讨论】：

标签： reactjs

【解决方案1】：

试试这个

//api.js
import axios from "axios";
export const getValues = async () => {
    const {data} = await axios.get("http://localhost:8000/percents");  
return data
};

在您的 App.js 中

  const [values, setValues] = useState([]);

  useEffect(() => {
    loadPercents();
  },[]);
  const loadPercents = () => getValues().then((v) => setValues(v));

console.log(values) 
...

使用 optional 这样的链接，以防 axios 仍在从 api 获取数据

const fv = values?.filter(x => x?.id === "x3m1")

// chsck what are you getting from the array fv by 

console.log(fv) 
  console.log(fv[0]?.value);

【讨论】：