Извлечение данных с помощью реакции и картирования - PullRequest
Новая
       20

Извлечение данных с помощью реакции и картирования

0 голосов
/ 17 декабря 2018

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

Код реагирования 

import * as React from 'react';
import './PracticeAreas.css';

import IReportGroup from 'src/model/IReportGroup';

interface IOwnProps {
    callAction: any
}

interface IOwnState {
    groups: IReportGroup[]
}

class PracticeAreas extends React.Component<IOwnProps, IOwnState> {

    constructor(props: IOwnProps) {
        super(props);
        this.state = {
          groups: []
        }
      }

    public render() {

        return (
        <div className="col-md-12 practiceAreas">
            <h1>Practice Areas</h1>
            <div className="item-container plain-bg selection-refinement">
                <div className="refinement-search">
                    <input type="text" value="" placeholder="What are you looking for?" />
                </div>
            </div>

            <ul className="list-inline groupedTags">
                {this.state.groups}
            </ul>
        </div>
        );
    }

    public groups() {
        fetch(`https://localhost:44301/api/v2/navigator/reports/groups`)
            .then((res) => res.json()
            .then((data) => { 
                const groups = data.results.map((group: IReportGroup) => {
                    return( <li key={group.id}>{group.name}</li>
                )
        })
        this.setState({groups: groups});
        }))
    }
};

export default PracticeAreas

Вызов API 

[Route("groups")]
[HttpGet]
public IList<NavigatorReportSelectionGroup> GetGroups()
{
    var groups = navigatorReportSelectionService.GetGroups();
    return groups.ToList();
}

Сервисный вызов 

public IList<NavigatorReportSelectionGroup> GetGroups()
{
    var allTopicGroups = navigatorService.GetTopicGroups();

    return
        allTopicGroups.Select(x => new NavigatorReportSelectionGroup
        {
            Id = x.GroupId,
            Name = x.Name
        }).ToList();
}

Репо 

public IEnumerable<NavigatorTopicGroup> GetTopicGroups()
{
    return navigatorTopicGroupRepository.GetAll();
}

Модель 

public class NavigatorTopicGroup
{
    public Guid GroupId { get; set; }
    public string Name { get; set; }
}

Пример данных API 

<NavigatorReportSelectionGroup>
    <Focused>false</Focused>
    <Id>a184e2c5-af49-413e-9747-06741e97a512</Id>
    <Name>Insurance & Reinsurance group</Name>
    <Order>0</Order>
    <Type>Topics</Type>
</NavigatorReportSelectionGroup>
<NavigatorReportSelectionGroup>
    <Focused>false</Focused>
    <Id>955e3e12-6e02-4e77-bcec-08b2fcb6f3e8</Id>
    <Name>Patents group</Name>
    <Order>0</Order>
    <Type>Topics</Type>
</NavigatorReportSelectionGroup>
<NavigatorReportSelectionGroup>
    <Focused>false</Focused>
    <Id>d21384b5-27be-4bfc-963d-0d2ad40dbbfb</Id>
    <Name>Employment: Canada group</Name>
    <Order>0</Order>
    <Type>Topics</Type>
</NavigatorReportSelectionGroup>

IReportGroup: 

export default interface IReportGroup {
    id: string,
    type: ReportOptionType,
    name: string,
    order: number,
    focused: boolean
}

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

Во-первых, у вас есть проблема с областью действия.Вы должны поместить вызов this.setState после отображения результата.

Во-вторых, у вас есть закрывающие скобки для первого блока then в неправильном месте.

В-третьих, javascript не делает 'Вы должны установить функции как public или private.

Попробуйте это: 

groups() {
    fetch(`https://localhost:44301/api/v2/navigator/reports/groups`)
        .then((res) => res.json())
        .then((data) => { 
            const groups = data.results.map((group: IReportGroup) => {
                return( <li key={group.id}>{group.name}</li>)
            })
            this.setState({groups: groups});
        })
}
0 голосов
/ 17 декабря 2018

В вашем fetch отсутствует инструкция возврата.Это распространенная ошибка, которую легко исправить.

Возьмите: 

public groups() {
        fetch(`https://***`)
            .then((res) => res.json()
            .then((data) => { 
                const groups = data.results.map((group: IReportGroup) => {
                    return( <li key={group.id}>{group.name}</li>
                )
        })
         this.setState({groups: groups});
        }))
    }

и настройте ее так: (все, что я изменяю, это добавление пропущенного оператора возврата) 

groups() {
        fetch(`https://***`)
            .then(res => { return res.json(); })
            .then(data => { 
                const groups = data.results.map((group: IReportGroup) => {
                    return( <li key={group.id}>{group.name}</li>
                )
                this.setState({groups});
        })
        }))
    }

Надеюсь, это поможет.

Обновление

В вашем источнике есть несколько областей, которые можно настроить.Я предполагаю, что у вас есть фон ООП.Вам не нужно объявлять ваши функции как public или private.

Ваш setState находится вне области видимости.Так что это ничего не устанавливает.Я не совсем уверен, к какому результату вы собираетесь ... но я бы просто назначил const group на data.results, а затем сразу после этого установил бы ваше состояние следующим образом: 

const groups = data.results; 
this.setState({ groups });

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

Я закончу там.

...