ReactJS，多次获取和渲染数据

Question

我是 React 的新手，为了我的第一个 React 项目，我已经为获取数据苦苦挣扎了好几天。

我基本上有一个卡片列表，分为两个部分：CardsList 和 Card。我要做的是获取每张卡片的数据。我的问题是，我几乎不了解获取单个端点的工作原理，同时尝试从多个端点获取数据似乎打败了我。

我尝试按照博客中解释提取的示例进行操作，并得出以下结论：

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

作为第一次尝试，我尝试仅将第二次获取的数据提供给卡片组件。控制台显示："Uncaught TypeError: Cannot read property 'apiRequest2' of undefined".

我正尝试从各个地方学习一些东西，但我可能会让事情变得更加混乱。我做错了什么，我应该怎么做？如果我看起来也很混乱，请见谅。

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

第一次获取是这样的：数据：[{标题："test"，body："test"，作者：“1”，id：“1”，...}，...

和第二次获取：数据：[{image_url: "abc.png", id: "1",...},...

Answer 1

问题出在这一行

const { combinedData } = this.state;

等于这个

var combinedData = this.state.combinedData;

而且我确定 this.state.combinedData 是未定义的；所以抛出这个异常

Uncaught TypeError: Cannot read property 'apiRequest2' of undefined"

您需要在构造函数中添加 this.state.combinedData 的默认值，这样第一次渲染就不会失败。之后您需要致电

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

在您的获取请求得到解决的某个时刻。

ReactJS，多次获取和渲染数据

ReactJS, multiple fetches and rendering the data

fetch

reactjs

fetch-api