Проблемы с реакцией на возврат данных из Web Api - PullRequest
Новая
       6

Проблемы с реакцией на возврат данных из Web Api

0 голосов
/ 07 января 2019

Я следовал некоторым довольно простым учебникам, чтобы настроить базовую службу Web Api и приложение React TS для ее использования, но когда мой реагирующий компонент вызывает службу WebApi, я вижу, что Web Api входит и возвращает данные - как и в случае ввода URL-адреса API в браузере, он возвращает правильные элементы JSON, но в коде JavaScript для React ответ HTTP не содержит никаких данных, когда обещание возвращается из выборки, просто пустой ответ 200.

Т.е. response.data не определена.

Это должно быть что-то очень простое, я делаю неправильно - как я уже говорил, когда вы вводите URL-адрес API в браузере, вы видите правильный JSON в браузере. Так почему мой код реакции не может понять ответ?

My Web 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

1 Ответ

0 голосов
/ 07 января 2019

Мне кажется, что проблема в компоненте fetch вашей реакции. В первом then обратном вызове вы получаете объект ответа .

Чтобы получить данные из него, вам нужно вызвать один из его методов (которые возвращают обещание). В вашем случае, поскольку ответ содержит 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);
        }
    )
...