c#， React，从JSON文件中获取数据

Question

我是c#开发的新手，我正试图从JSON文件中获取数据，以便在投资组合网站的React页面上显示。我试图遵循本教程的c#部分，我计划完全重做React &;CSS部分，以适应我想要的外观(已经将react类组件更改为功能组件)，但是当转到/aboutMe URL时，它是空白的。我似乎无法弄清楚如何使fetch请求与控制器一起工作，我已经查找了它，并找到了编写控制器的不同方法，这将否定对JSON文件的需要，但我想知道是否有建议使其与JSON文件一起工作。

编辑:api/aboutMe URL加载了api，但是api的数据没有提交到React组件中。

任何帮助/建议将不胜感激。

我有一个控制器:

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using PortfolioSite.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace PortfolioSite.Controllers
{
[ApiController]
[Route("api/aboutMe")]
public class AboutController
{
[HttpGet]
public AboutMe GetAboutInfo()
{
string jsonText = System.IO.File.ReadAllText("./Data/AboutMe.json");
return JsonConvert.DeserializeObject<AboutMe>(jsonText);
}
}
}

模型:

using System;
namespace PortfolioSite.Models
{
public class AboutMe
{
public String Name { get; set; }
public String Title { get; set; }
public String Location { get; set; }
public String Description { get; set; }
}
}

react组件:

import React, { Component, useState, useEffect  } from 'react';
import {
Row, Col, Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button
} from 'reactstrap';
const AboutMe = () => {
const [hasError, setErrors] = useState(false);
const [name, setName] = useState("");
const [title, setTitle] = useState("");
const [location, setLocation] = useState("");
const [description, setDescription] = useState("");
const fetchData =()=> {
fetch("api/aboutMe")
.then((res) => res.json())
.then(res => setTitle(res.title))
.then(res => setName(res.name))
.then(res => setLocation(res.location))
.then(res => setDescription(res.description))
.catch(err => setErrors(err));
}
useEffect(() => {
fetchData();
},[]);

return (
<div style={{ padding: "15px" }}>
<Row>
<Col md={2}>
<img style={{ height: "100px" }} src='' />
</Col>
<Col md={3} className="center-mobile-text">
<div >
<h5>Name : {name}</h5>
<p> Location: {location}</p>
<p> Title : {title} </p>
</div>
<a style={{ color: "#007bb5" }} target="_blank" href="">
<span className="fa-stack fa-lg">
<i className="fas fa-circle fa-stack-2x"></i>
<i className="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
</span>
</a>
<a style={{ color: "black" }} target="_blank" href="">
<span className="fa-stack fa-lg">
<i className="fas fa-circle fa-stack-2x"></i>
<i className="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
<a style={{ color: "red" }} target="_blank" href="">
<span className="fa-stack fa-lg">
<i className="fas fa-circle fa-stack-2x"></i>
<i className="fas fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
</Col>
<Col md={7}>
<p className="textStyle">{description}</p>
</Col>
</Row>
</div>
);
}
export default AboutMe;

和Data Folder中的JSON文件:

{
"Name": "Test data",
"Title": "Test data job",
"Location": "Test data location",
"Description": ""
}

Answer 1

首先，在你的React组件中，改变你的useEffect from:

useEffect(() => {
fetchData();
});

为:

useEffect(() => {
fetchData();
}, []);

在第一种情况下，每次更新组件时都会执行useEffect。因此，fetchData将永远运行(顺便冻结你的页面)。

在第二种情况下，useEffect将在组件挂载后执行。所以fetchDate只会运行一次。

对于api，您是否尝试使用路由:api/aboutMe/GetAboutInfo ?