javascript - 无法对从 Web Api 返回的数据使用react

Question

我已经按照一些相当基本的教程设置了一个基本的 Web Api 服务和一个 React TS 应用程序来使用它，但是当我的 React 组件调用 WebApi 服务时，我可以看到 Web Api 进入并返回数据 - 如果我在浏览器中输入 API url，它会返回正确的项目 JSON，但在 React 的 javascript 代码中，当 promise 从 fetch 返回时，HTTP 响应似乎不包含任何数据，只是一个空的 200 响应。

即response.data未定义。

这一定是我做错的非常基本的事情 - 正如我提到的，当您在浏览器中输入 API URL 时，您会在浏览器中看到正确的 JSON。那么，为什么我的 React 代码无法理解响应？

我的网络 API

 [EnableCors("*", "*", "*")]
    public class ItemsController : ApiController
    {
        private readonly Item[] _items = {
            new Item
            {
                ...
            },
            new Item
            {
                ...
            },
            new Item
            {
                ...
            },
        };

        public HttpResponseMessage Get()
        {
            return Request.CreateResponse(HttpStatusCode.OK, _items);
        }

        public HttpResponseMessage Get(long id)
        {
            var item= _items.FirstOrDefault(t => t.ItemId == id);
            if (item== null)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, "Not found");
            }

            return Request.CreateResponse(HttpStatusCode.OK, item);
        }
    }

我的 react 组件

import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import '../../App.css';
import IStoreState from '../../interfaces/IStoreState';
import Item from '../../model/item';
import { getItemsReceivedAction } from './actions';

interface IItemsProps {
    items: Item[],
    itemsUpdated: (items:Item[]) => void
}

class Trades extends React.Component<IItemsProps> {
    constructor(props:IItemsProps) {
        super(props);
    }

  public componentDidMount() {
        fetch('http://localhost:58675/api/items', {
            headers: {
                Accept: 'application/json',
            },
            method: 'GET'            
        }).then((t:any) => 
            {
                const results = t;
                this.props.itemsUpdated(results.data);
            }                        );
    }

    public render() {
        return (
            <div>                
                {this.props.items} items displayed
            </div>
        );
    }

}

const mapDispatchToProps = (dispatch:Dispatch) => {
    return {
        itemsUpdated: (items:Item[]) => dispatch(getItemsReceivedAction(items))
    }
}

function mapStateToProps(state:IStoreState) {
    return {
        items: state.viewingItems
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Items);

编辑:下面的 javascript 结果对象

body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:58675/api/items"
__proto__: Response

Answer 1

在我看来，问题出在你的 React 组件的 fetch 部分。您在第一个 then 回调中得到的是 Response object .

为了从中获取数据，您需要调用其中一个方法(返回一个 promise )。在您的情况下，由于响应包含 json，因此您需要调用 json() 方法。之后，您将另一个 then 链接到您操作已解析数据的地方:

fetch('http://localhost:58675/api/items', {
        headers: {
            Accept: 'application/json',
        },
        method: 'GET'            
    }).then((t:any) => 
        {
            return t.json(); // <-- this part is missing
        }
    ).then((t:any) => 
        {
            const results = t;
            this.props.itemsUpdated(results.data);
        }
    )