时间戳

首页 > 解决方案 > 如何从两个不同的 API 中获取 Object Json 类型中的两个值？

reactjs - 如何从两个不同的 API 中获取 Object Json 类型中的两个值？

问题描述

我需要从两个不同的 JSON API 传递两个对象数据。

考虑下面的代码：

 componentDidMount(){
     const loginEmail = localStorage.getItem('loginEmail');
        fetch(`http://localhost:9000/api/users/view/${loginEmail}`,)  // first api
         .then((resp)=>{
           resp.json().then((res)=>{
             this.setState({users_data: res.data});} 
           )
         })

         const id = localStorage.getItem('id');
         fetch(`http://localhost:9000/api/event/view/${id}`,) // second api
         .then((resp)=>{
           resp.json().then((res)=>{
             this.setState({
                event_data: res.data,
             });
           })
         })
    }

我如何从 json api 调用对象值：

 render() {
        const users_data= this.state.users_data;
        const event_data= this.state.event_data;
        console.log(users_data) //I can get this two result on my console log 
        console.log(event_data)

return(
 <div className="Container">
      {
           Object.keys(users_data, event_data).map((key) =>    // not sure is it the correct way? 
               <div className="po-left-column">
               <h1>User Name: { users_data[key].name }</h1>
               <h1>Event Name: { event_data[key].name }</h1>
               </div>
        )} 
  </div>
 );
}

所以从上面的代码中，我可以在控制台日志中看到两个数据（users_data 和 event_data），但我无法在 UI 中显示数据？有什么我错了吗？

标签： reactjsapiobject

解决方案

您可以像这样使用“.map”。每当状态对象发生变化时，React DOM 都会自动更改输出。应该使用“key”attr 来检测这种变化。

return(
        <div className="Container">
            {
                users_data.map((value, index) => {
                    return (
                        <h1 key={'users_data' + index}>User Name:{value.name}</h1>
                    )
                })
            }
            {
                event_data.map((value, index) => {
                    return (
                        <h1 key={'event_data' + index}>Event Name:{value.name}</h1>
                    )
                })
            }
        </div>
        );

推荐阅读