ReactJS，多次获取并呈现数据

我对React非常新，我一直在为第一个React项目挣扎了好几天。ReactJS，多次获取并呈现数据

我基本上有一张卡片清单，分为两个部分：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：无法读取未定义的属性”apiRequest2“。

我试图从各地学习一点点，但我可能会让事情更混乱。我做错了什么，我该怎么做呢？道歉，如果我可能看起来很混乱。

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

第一个读取是这样的：数据：[{标题： “测试”，身体： “测试”，作者： “1”，ID： “1”，...}，...

和第二取：数据：[{IMAGE_URL： “abc.png”，ID： “1”，...}，...

来源

2017-09-22 JaneEyre

您是否在第一次请求中获得卡片列表，然后获取第二张卡片上的详细信息？你能告诉我们更多关于你想要获取什么的信息以及可能的答案的例子吗？ – bennygenel

编辑该帖子。 – JaneEyre

的问题是在这条线

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

您的提取请求可以解决某些问题。

来源

2017-09-22 18:02:53

好吧，我已经将this.state.combinedData的默认状态设置为构造函数中的空数组。但是，我有点不确定应该在哪里设置combinedData的新状态。我在Promise.all后立即在componentDidMount（）中添加了this.setState（{combinedData：combinedData}），但是我得到了“Uncaught TypeError：无法读取未定义的属性'Symbol（Symbol.iterator）'。我是否应该先删除提到的那条线？ – JaneEyre

@JaneEyre：我认为你应该用'this.setState ...'替换'return combinedData;'这里的想法是在完成获取数据之后更新状态。状态由this.setState更新后，react会自动调用render（）方法。 –

@ĐịnhTrần：我想用this.setState替换返回的combinedData，但是出于某种原因，我得到了相同的错误。两次我做了更改，错误本身指向for循环中combinedData的使用行。这个问题可能是别的吗？ – JaneEyre

ReactJS，多次获取并呈现数据

回答

相关问题