Не получать данные с помощью ReactJS Fetch () с Nancyfx API в C # .NET - PullRequest
Новая
       10

Не получать данные с помощью ReactJS Fetch () с Nancyfx API в C # .NET

0 голосов
/ 15 октября 2018

Я создал простой Nancy API в C # .NET, используя настройки по умолчанию (без пользовательского загрузчика Nancy), и я пытаюсь извлечь из него данные, используя метод ReactJS Fetch.

У меня есть переменная State вРеагируйте, но когда я вызываю мой API, я не получаю возвращаемых данных.

Вот мой код для API.Мне было проще понять, могу ли я получить какие-либо данные из API. 

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Security.Claims;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using Common;
using Nancy;
using Nancy.Extensions;
using Nancy.Hosting.Self;
using Nancy.IO;
using Newtonsoft.Json.Linq;
using System.Security.Principal;
using System.IdentityModel.Tokens.Jwt;
using Microsoft.IdentityModel.Tokens;
using Nancy.ModelBinding;

    namespace TestGui
    {
        public partial class Form1 : Form
        {
            private object ds;
            //public NancyHost nancyHost = new NancyHost(new Uri("http://localhost:9664"), new CustomBootstrapper());
            public NancyHost nancyHost = new NancyHost(new Uri("http://localhost:9664"));

            public Form1()
            {
                InitializeComponent();
            }



            private void btnStart_Click(object sender, EventArgs e)
            {
                nancyHost.Start();
                richTextBox1.Text += "Web server running...";
            }

            private void btnStop_Click(object sender, EventArgs e)
            {
                richTextBox1.Text += "Web server stopping...";
                nancyHost.Stop();
            }


        public class Dinosaur
        {
            public string Name { get; set; }
            public int HeightInFeet { get; set; }
            public string Status { get; set; }
        }

        public class DinosaurModule : NancyModule
        {
            private static Dinosaur dinosaur = new Dinosaur()
            {
                Name = "Kierkegaard",
                HeightInFeet = 0,
                Status = "Deflated"
            };

            public DinosaurModule()
            {
                Get["/dinosaur"] = parameters => dinosaur;                
            }
        }

    }

Когда я использую Почтальон, я могу получить ответ.

Postman_Reponse

Итак, теперь я пытаюсь сделать вызов Fetch в ReactJS и заполнить STATE.Это было сделано в App.js во вновь созданном проекте ReactJS. 

<code>import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';


class App extends React.Component {
  constructor(){
    super() 
      this.state = {
        repos: []
      };

  }

  componentDidMount() {

  }

  callApi(){

        // Call the API page
        let url = 'https://localhost:9664/dinosaur';
        fetch(url).
         then(response => response.json()).then((repos) => {
             console.log(repos);
             console.log(repos.length);
             this.setState({
               repos: repos
             });
           });


        // let url = 'https://api.github.com/users/'+user+'/repos';
        // fetch(url).
        //  then(response => response.json()).then((repos) => {
        //      console.log(repos);
        //      console.log(repos.length);
        //      this.setState({
        //        repos: repos
        //      });
        //    });


  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <button onClick={() => this.callApi()}>
        Click here to call API Test
        </button>
        <pre>{JSON.stringify(this.state.repos, null, 2) }
)}} ReactDOM.render (, document.getElementById ('root')) экспорт приложения по умолчанию;

В приведенном выше приведенном коде я также проверяю Github API, чтобы узнать, могу ли я вернуть свои репозитории.Я преуспел в этом сценарии.

Не уверен, что мне что-то не хватает в ответе от API Nancy, так как я знаю, что выборка работает против других API.Любая помощь очень ценится.

ОБНОВЛЕНИЕ Я скорректировал возврат к переменной Response.Заполнил несколько заголовков, чтобы увидеть, решит ли это проблему, но это не так.

//create response
var response = (Response)Helper.ConvertDataSetToJson(POSTDataSet);
response.ContentType = "application/json";
response.Headers.Add("Vary", "Accept");
response.StatusCode = HttpStatusCode.OK;

//return response
return response;

Я читал похожие проблемы нескольких других людей, и команда Reponse.ASJson () не вернула правильный формат Json.

...