时间戳

首页 > 解决方案 > 为什么在使用“dotnet new react -o my-app”中的默认代码时出现 JSON.parse 错误？

javascript - 为什么在使用“dotnet new react -o my-app”中的默认代码时出现 JSON.parse 错误？

问题描述

运行终端命令 'dotnet new react -o my-app' 会构建一个 C# React 应用程序，但是在测试启动文件时它不起作用。从 my-app/ClientApp 目录运行“npm start”会启动应用程序，但导航到http://localhost:3000/fetch-data页面会出现控制台错误：

“SyntaxError：JSON.parse：JSON 数据第 1 行第 1 列的意外字符”

这是它永远不会通过的代码块：

constructor(props) {
super(props);
this.state = { forecasts: [], loading: true };

fetch('api/SampleData/WeatherForecasts')
  .then(response => response.json())
  .then(data => {
    this.setState({ forecasts: data, loading: false });
  });
}

它调用此控制器，但其中的代码永远不会运行：

[Route("api/[controller]")]
public class SampleDataController : Controller
{
    [HttpGet("[action]")]
    public IEnumerable<WeatherForecast> WeatherForecasts()
    {
        Console.WriteLine("I NEVER GET CALLED");
        var rng = new Random();
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
            TemperatureC = rng.Next(-20, 55),
            Summary = Summaries[rng.Next(Summaries.Length)]
        });
    }

我正在使用这些文档来构建应用程序：

https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-3.0&tabs=netcore-cli

我计划将其用作构建新应用程序的脚手架，但我担心在我对其进行任何编码之前它无法正常工作。有谁知道为什么或如何解决它？

标签： javascriptc#.netreactjscreate-react-app

解决方案

您会收到错误，因为 NODEJS (NPM START) 不是为托管 .NET 而设计的，而用 c# 编写的 API 调用是 AspNet、AspNetCore 等。顺便说一句，NPM START 会启动位于package.json文件中的资源，并且该文件未提及整体解决方案的 Microsoft 部分（是的，您正在工作的 Microsoft 文章令人困惑，因为它没有直接指出这一点）。

IIS（或本例中的Microsoft Internet Information Services Express）可以同时托管React和 API，因为Startup.cs文件和AspNetCore已配置为这样做。

现实世界中，我们通常在一个项目下生成我们的 API，同时在另一个项目下构建我们的 UI 应用程序，每个都托管在一个唯一的端口上，这至少通过能够独立测试API / UI来提供很大的优势（嗯，无论如何，API 都是独立的——你也可以在没有 API 的情况下测试 UI，但没有 API 数据，这并不总是实用的）。

推荐阅读