无法对来自 Web Api 的 return 数据作出反应

Question

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

即response.data未定义。

这一定是一些非常基本的东西我做错了——正如我提到的，当你在浏览器中输入 API url 时，你会在浏览器。那么为什么我的反应代码不能理解响应？

我的网站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);
        }
    }

我的反应组件

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

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

为了从中获取数据，您需要调用其中一种方法（return 一个承诺）。在您的情况下，由于响应包含 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);
        }
    )

无法对来自 Web Api 的 return 数据作出反应

Trouble getting react to return data from Web Api

javascript

reactjs

asp.net-web-api2