Как получить два значения в типе Object Json из двух разных API?

Question

Мне нужно передать два объекта данных из двух разных 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) в журнале консоли, но мне не удается отобразить данные в пользовательском интерфейсе? Это что-то я не так?

Answer 1

Вы можете использовать «.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>
        );

Answer 2

Object.keys() принимает только один аргумент . Попробуйте изменить свой рендер, вернитесь к чему-то похожему на приведенное ниже и посмотрите, ближе ли он к ожидаемому результату

return (
  <div className="Container">
    <div className="po-left-column">
    { Object.keys(users_data).map((key) => <h1>User Name:{users_data[key].name}</h1>) }
    { Object.keys(event_data).map((key) => <h1>Event Name: {event_data[key].name}</h1>) }              
    </div>
  </div>
 );