ReactJS，多次获取和呈现数据

我对React是个新手，为了我的第一个React项目，好几天来我一直在努力获取数据

我基本上有一个卡片列表，分为两部分：CardsList和Card。我想做的是获取每张卡的数据。我的问题是，我几乎不了解如何在一个端点上获取数据，而试图同时从多个端点获取数据似乎让我难以接受

我试着按照一个博客上解释fetch的例子来做，并得出以下结论：

export default class CardsList extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        details: [],
        attachments: []
    };
}


componentDidMount() {

    //API and DEFAULT_QUERY have been set here, don't mind the ellipses
    var API = '...';
    var DEFAULT_QUERY = this.props.data;


    var apiRequest1 = fetch(API + DEFAULT_QUERY, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        credentials: 'include',
    }).then(response => response.json());

    var apiRequest2 = fetch(API + DEFAULT_QUERY + '_attachment', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        credentials: 'include',
    }).then(response => response.json());

    var combinedData = {"apiRequest1":{},"apiRequest2":{}};
    Promise.all([apiRequest1, apiRequest2]).then( values => {
        combinedData["apiRequest1"] = values[0];
        combinedData["apiRequest2"] = values[1];
        return combinedData;
    });
}

render() {

    const { combinedData } = this.state;

    let list = [];
    for(var item of combinedData["apiRequest2"]) {
        list.push(
            <Card data={item} key={list.length}/>
        );
    }

    return (
        <div className="container">
            <div className="row">
                {list}
            </div>
        </div>
    );
}}

导出默认类CardsList扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
详情：[]，
附件：[]
};
}
componentDidMount（）{
//这里已经设置了API和默认查询，不要介意省略号
var API='…'；
var DEFAULT_QUERY=this.props.data；
var apiRequest1=fetch（API+DEFAULT_查询{
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
凭据：“包括”，
}).then（response=>response.json（））；
var apiRequest2=fetch（API+默认的\u查询+'\u附件'{
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
凭据：“包括”，
}).then（response=>response.json（））；
var combinedData={“APIRest1”：{}，“APIRest2”：{}；
所有（[APIRest1，APIRest2]）。然后（值=>{
组合数据[“APIRest1”]=值[0]；
组合数据[“APIRest2”]=值[1]；
返回组合数据；
});
}
render（）{
const{combinedData}=this.state；
让列表=[]；
对于（组合数据的var项[“APIRest2”]）{
list.push(
);
}
返回(
{list}
);
}}

作为第一次尝试，我尝试只向卡组件提供第二次获取的数据。控制台显示：“未捕获的TypeError:无法读取未定义的属性'APIRest2'

我试着从任何地方学到一些东西，但我可能会让事情变得更加混乱。我做错了什么？我该怎么做？如果我看起来也很困惑，我道歉

编辑：在第一次抓取时，我试图获取卡片的标题、作者和日期，在第二次抓取时，我试图获取卡片的预览图像

第一次提取如下所示： 数据：[{标题：“测试”，正文：“测试”，作者：“1”，id:“1”，…}

第二次取回：

---

数据：[{image\u url:“abc.png”，id:“1”，…}

const { combinedData } = this.state;

等于这个

var combinedData = this.state.combinedData;

我确信this.state.combinedData是未定义的；因此会引发此异常

未捕获的TypeError:无法读取未定义的属性“APIRest2”

您需要在构造函数中为this.state.combinedData添加默认值，以便第一次渲染不会失败。之后，您需要调用

this.setState({
  combinedData: ... // your data
})

---

当你的取回请求得到解决时。

你是在第一个请求中得到卡片列表，然后在第二个请求中得到详细信息吗？你能告诉我更多关于你试图取回的内容以及可能的响应示例吗？编辑了这篇文章。好的，我已经将this.state.combinedData的默认状态设置为空但是，我有点不确定应该在何处设置combinedData的新状态。我在Promise.all之后的componentDidMount（）中添加了这个.setState（{combinedData:combinedData}），但我得到了未定义“。我应该先删除你提到的那行吗？@Janeyer:我认为你应该用

this.setState…

替换

return combinedData；

。这里的想法是在你完成数据提取后更新状态。在状态由this.setState更新后，react将自动调用render（）方法。@ị新罕布什尔州ần：我也想过用这个.setState替换返回的combinedData，但出于某种原因，我得到了相同的错误。两次我做了更改，错误本身都指向for循环中使用combinedData的行。问题可能是别的吗？

好的，我已经将this.state.combinedData的默认状态设置为e构造函数中的mpty数组。

combinedData[“APIRest2”]未定义。您可以设置调试器并自行检查。`[“something”]将返回未定义。我终于找到了它！谢谢！我回到了“详细信息”和“附件”状态as声明并意识到在状态更新时我没有给出正确的值，这就是for循环不起作用的原因。因此基本上我应该使用：

this.setState（{info:combinedData[“apirest1”].data，attachments:combinedData[“apirest2”].data}）；

我没有注意

数据部分。