javascript - 如何将数据从 .NET Controller 显示到 React View ？

Question

我正在尝试学习如何使用 .NET 和 React，并制作一个单页应用程序，其中 React 前端与 .NET 后端通信。我决定创建一个简单的恒温器应用程序，用户可以在其中查看恒温器温度并按下按钮来升高和降低该温度。尽管我正在努力从我的 Controller 类中获取数据以显示在我的前端，但在我什至走得那么远之前。这是我的代码:

ThermostatController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace ThermostatDotNet.Controllers
{
    [Route("api/[controller]")]
    public class ThermostatController : Controller
    {

        private int _Temperature { get; set; }

        public ThermostatController(int _temperature)
        {
            _Temperature = _temperature;
        }

        [HttpGet, Route("GetTemp")]
        public int GetTemp()
        {
            return _Temperature;
        }

        [HttpGet, Route("Increase")]
        public int Increase()
        {
            _Temperature += 1;
            return _Temperature;
        }
    }
}

恒温器

import React, { Component } from 'react';

export class Thermostat extends Component {
    state = {
        temp: ""
    }

    displayTemp() {
        fetch("api/Thermostat/GetTemp")
            .then(response => response.text())
            .then(data => {
                this.setState({ temp: data });

            });
    }

  render () {
    return (
      <div>
        <h1>Thermostat</h1>
            <p>The temperature is:{this.state.temp}</p>
      </div>
    );
  }
}

我遇到的问题是我想在用户访问应用程序时显示恒温器的当前温度。我不确定如何创建新的恒温器并在我的 React 代码中显示温度？我查看了其他 Stack Overflow 答案，但仍然发现很难在这里实现(我对 React 和 .NET 很陌生)。谁能帮忙？谢谢 :)

更新 收到以下错误后 InvalidOperationException: Unable to resolve service for type 'System.Int32' while attempt to activate 'ThermostatDotNet.Controllers.ThermostatController'. 我设法通过使用一个接口(interface)并实现它来解决这个问题:

[Route("api/[controller]")]
    public class ThermostatController : Controller
    {
        private readonly ITemperature _temperature;

        private int _Temperature { get; set; }

        public ThermostatController(ITemperature temperature)
        {
            _temperature = temperature;
        }

        [HttpGet, Route("GetTemp")]
        public int GetTemp()
        {
            return _Temperature;
        }
}

Answer 1

首先你需要像这样从你的 Controller 返回数字。

使用 return Ok();

    [Route("api/[controller]")]
    public class ThermostatController : Controller
    {
        public ThermostatController()
        {
        }

        [HttpGet, Route("GetTemp")]
        public int GetTemp()
        {
            return Ok(1);
        }
    }

更新:然后在你的 react 中使用 componentDidMount 确保你 console.log(data) 看到数据然后使用 data.something 显示数据

componentDidMount() {
        fetch("api/Thermostat/GetTemp")
            .then(data => {
                console.log(data);
                this.setState({ temp: data });
        });
    }

可以阅读文档here