Question

我正在尝试通过react来从API调用中获取数据并映射它，以便我可以遍历项目列表。问题是，尽管我进行API调用时有数据，但用react进行获取时列表中没有返回任何内容，问题可能与映射或状态有关吗？我已经包含了尽可能多的代码，因此您可以从表示层到存储库进行查看，包括从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
}

Answer 1

首先，您遇到范围问题。您应该在结果映射之后将呼叫转到const input = {foo: 'bar', __proto__: {unwanted: 'things'}} expect(JSON.parse(JSON.stringify(input))).toEqual({foo: 'bar'}) // true // this works but is there a cleaner way ?。

第二，您在错误的位置插入了第一个this.setState块的右括号。

第三，javascript不需要将函数设置为then或public。

尝试一下：

private

Answer 2

您在fetch中缺少return语句。这是一个常见错误，很容易解决。

为此：

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});
        }))
    }

并将其调整为如下所示（我要做的就是添加缺少的return语句）

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});
        })
        }))
    }

希望这会有所帮助。

更新

您的来源中有一些区域可以调整。我猜你有OOP背景。您无需将函数声明为public或private。

您的setState超出范围。因此，它没有设置任何内容。我不确定您要获得什么样的结果...但是我只是将const group分配给data.results，然后立即设置状态，如下所示：

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

然后，您要将映射的数组映射到想要呈现这些结果的任何位置。我不确定您在任何地方都可以调用此功能。您的来源有点难以阅读，也许我忽略了它。

我将在这里结束。

通过反应和映射获取数据

2 个答案: