Question

我使用dotnet new react使用dotnet core的react模板应用程序创建了一个全新的react应用程序。然后，我试图模仿Fetch Data Component的功能，但无法获取动态数据。我已确保该组件位于路由组件中，并且已从服务器以我期望的格式返回我的数据。这就是我所拥有的以及代码的获取数据组件所具有的东西。

FetchData.tsx：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import 'isomorphic-fetch';

interface FetchDataExampleState {
    forecasts: WeatherForecast[];
    loading: boolean;
}

export class FetchData extends React.Component<RouteComponentProps<{}>, FetchDataExampleState> {
    constructor() {
        super();
        this.state = { forecasts: [], loading: true };

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

    public render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : FetchData.renderForecastsTable(this.state.forecasts);

        return <div>
            <h1>Weather forecast</h1>
            <p>This component demonstrates fetching data from the server.</p>
            { contents }
        </div>;
    }

    private static renderForecastsTable(forecasts: WeatherForecast[]) {
        return <table className='table'>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
            {forecasts.map(forecast =>
                <tr key={ forecast.dateFormatted }>
                    <td>{ forecast.dateFormatted }</td>
                    <td>{ forecast.temperatureC }</td>
                    <td>{ forecast.temperatureF }</td>
                    <td>{ forecast.summary }</td>
                </tr>
            )}
            </tbody>
        </table>;
    }
}

interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

这就是我所拥有的。

Bills.tsx

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface BillState {
    bills: Bill[],
    loading: boolean
}

export class Bills extends React.Component<RouteComponentProps<{}>, BillState> 
{
    constructor()
    {
        super();

        this.state = { bills: [], loading: true };

        fetch("api/SampleData/GetBills")
            .then(response => response.json() as Promise<Bill[]>)
            .then(data => { this.setState({ 
                bills: data, 
                loading: false 
            }); 
        });
    }

    public render()
    {

        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : Bills.renderBillsToList(this.state.bills);

        return  <div className="rendered-bills">
                    <h1>Bills to pay</h1>
                    { contents }
        </div>
    }

    public static renderBillsToList(bills: Bill[])
    {
        return  <ul>
                    {bills.map( (bill, i) => <li key={ i }> { bill.Name } </li>
                    )}
        </ul>;
    }
}

interface Bill 
{
    Name: string;
}

我的RenderBillsToTable做错了什么？我可以看到ul和li的渲染图，但是我确定无法传递我的数据。

Answer 1

显然，该属性的名称是“名称”而不是“名称”。看来这是电脑和椅子之间的问题。

React render无法从api渲染我的数据

1 个答案: