C# 使用react和映射获取数据

我试图用react从一个API调用中获取数据并将其映射，这样我就可以遍历一个项目列表。问题是使用react获取时列表中没有返回任何内容尽管在调用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数据

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

---

您的

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

然后，您希望将该数组映射到渲染这些结果的任何位置。我不确定您是否在任何地方调用此函数。你的资料有点难读也许我忽略了

---

我就到此为止

首先，您有一个范围问题。您应该在结果映射之后调用

this.setState

第二，第一个

然后
块的右括号放错了位置

第三，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});
        })
}

groups（）{
取回(`https://localhost:44301/api/v2/navigator/reports/groups`)
.然后（（res）=>res.json（））
.然后（（数据）=>{
const groups=data.results.map（（组：IReportGroup）=>{
返回（
{group.name}
）
})
this.setState（{groups:groups}）；
})
}
为什么
c#
作为标记？我看不到在任何地方调用的函数
组。“我遗漏了什么吗？”卡巴尼从我嘴里说出了这句话。我也没有看到它被调用…idkthere没有丢失的返回。检查一下。Arrow函数会自动返回后面的任何函数，只要它不是函数我从未见过React source以您的方式完成它，所以我假设您是超级专业人士，并且您所做的高于我的工资等级：）好的…控制台。在第二个then语句中记录（数据）…您看到数据了吗？嗯，不是这样，因为第一个
then
块上的右括号在第二个块之后，但它应该在第二个块之前。根据上下文，它应该可以正常工作
public class NavigatorTopicGroup
{
    public Guid GroupId { get; set; }
    public string Name { get; set; }
}

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

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

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

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

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