Question

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

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

我正试图从各处学到一点但我可能会让事情变得更加混乱。我做错了什么，我应该怎么做呢？如果我似乎也感到困惑，请道歉。

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

第一次获取是这样的：数据：[{title：“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未定义;所以抛出了这个异常

未捕获的TypeError：无法读取属性＆＃39; apiRequest2＆＃39;未定义＆＃34;

您需要在构造函数中添加this.state.combinedData的默认值，以便第一个渲染器不会失败。之后你需要打电话

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

在你的获取请求结算时的某个时刻。

ReactJS，多次提取和渲染数据

1 个答案: