时间戳

首页 > 解决方案 > C#，React，从 JSON 文件中获取数据

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

问题描述

我是 C# 开发的新手，我正在尝试从 JSON 文件中获取数据以显示在投资组合网站的 React 页面上。我试图按照C# 部分的本教程进行操作，我计划完全重做 React 和 CSS 部分以适应我希望它的外观（已经将反应类组件更改为功能组件），但是当转到 /aboutMe网址，它是空白的。我似乎无法弄清楚如何使获取请求与控制器一起使用，我查了一下并找到了编写控制器的不同方法，这将否定对 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; }
    }
}

反应组件：

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;

以及数据文件夹中的 JSON 文件：

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

标签： c#reactjsjsonfetch

解决方案

首先，在您的 React 组件中，将您的 useEffect 从：

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

进入 ：

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

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

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

对于 api，您是否尝试过使用路线： api/aboutMe/GetAboutInfo ？

推荐阅读