如何将 .NET 控制器中的数据显示到 React 视图？

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;
        }
    }
}

Thermostat.js

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 attempting to activate 'ThermostatDotNet.Controllers.ThermostatController'. 后，我设法通过使用接口并实现它来解决这个问题：

[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

首先你需要像这样从你的控制器返回数字。

使用return Ok();

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

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

更新：然后在您的反应中使用 componentDidMount 确保您使用 console.log(data) 查看数据，然后使用 data.something 显示数据

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

您可以阅读文档here