Question

我正在努力提高C＃和React的技能，因此我正在创建一个小型Web应用程序，该应用程序使用TFL API：https://api.tfl.gov.uk/Line/Mode/tube/Status

显示伦敦地铁线路的状态

我有一个控制器：

using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace TFL.Controllers
{
    [Route("api/[controller]")]
    public class TubeApi : Controller
    {
        [HttpGet("[action]")]
        public async Task<IActionResult> GetTubeStatus()
        {
            using (var client = new HttpClient())
            {
                try
                {
                    client.BaseAddress = new Uri("https://api.tfl.gov.uk");
                    var response = await client.GetAsync("/Line/Mode/tube/Status");
                    response.EnsureSuccessStatusCode();

                    var stringResult = await response.Content.ReadAsStringAsync();

                    var rawData = JsonConvert.DeserializeObject<List<RootObject>>(stringResult);

                        return Ok(new
                        {
                            LineId = rawData.name
                        });

                }
                catch (HttpRequestException httpRequestException)
                {
                    return BadRequest("Error getting data");
                }
            }
        }

    }


    public class RootObject
    {
        [JsonProperty("name")]
        public string name { get; set; }
        public List<LineStatus> lineStatuses { get; set; }

    }

    public class LineStatus
    {
        public string statusSeverityDescription { get; set; }

    }

}

我有前端：

import React, { Component } from "react";

export class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tube: "",
            status: ""
        };
    }

    getData(e) {
        e.preventDefault();
        fetch("api/TubeApi/GetTubeStatus")
            .then(response => response.json())
            .then(data =>
                this.setState({
                    tube: data.TubeLine,
                    status: data.TubeStatus
                })
            );
    }

    render() {

        return (
            <div>
                <center>
                    <h1>Tube</h1>
                    <h4>Name</h4>
                    <p>{this.state.tube}</p>
                    <h4>Status</h4>
                    <p>{this.state.status}</p>

                </center>
            </div>
        );
    }
}

我的目标是使两者互动，以便前端从我创建的控制器中提取数据。但是，数据无法通过：（

我尝试切换控制器路由，并更改名称以使其与Json中的功能匹配，但这不起作用。我对此并不陌生，因此我可能会遗漏一些非常明显的东西，并请您向正确的方向指点一下。

编辑/更新

API端点返回一个数组，因此我已更新以反序列化列表。但是，这仍然无法正常工作，这次还引发了构建错误（例如RootObject不包含名称定义）。

使用TFL API-后端使用C＃，前端使用React.js

0 个答案: