объекты не действуют в React

Question

Это мой app.js

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 

const App = ({ children }) => (
    <div> 
    {children} 
    </div> 
) 

import Index from './index' 
import Weatherhbh from './weatherhbh' 

render((
    <Router history={browserHistory}> 
    <Route path="widget/" component={App}> 
     <IndexRoute component={Index}/> 
     <Route path="hbh/" component={Weatherhbh}/> 
    </Route> 
    </Router> 
), document.getElementById('app')) 

и это мой HBH компонент

import React from 'react' 
import axios from 'axios' 

const urlP=`/hourly`; 

export default class App extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state={ 
     data:[] 
     }; 
    } 
    componentDidMount() { 
     axios.get(urlP) 
       .then(response => { 
       console.log(response.data,"this is response") 
       this.setState({ 
       data:response     
       }); 
      }); 
     } 


    render() { 
    return(<div> 

      <p>{this.state.data}</p> 

    </div> 
    ) 
    } 
} 

и я получаю эту ошибку

bundle.js:1244 Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of App .(…)

как я могу исправить, чтобы я мог отображать все данные, которые поступают из бэкэнд?

Answer 1

this.setState({ 
    data:response     
}); 

Этот раздел кода здесь назначает ответ (объект) к переменному состоянию data затем:

<p>{this.state.data}</p> 

пытается слишком визуализировать объект, но реагировать не знает, как сделать объекты. Чтобы получить использование данных:

<p>{this.state.data.data}</p> 

так как теперь data=response и ответ Вардар имеет свойство data который содержит фактические данные. И если случайно данные также являются объектом (данные json), вам нужно будет получить доступ к определенному ключу, например

this.state.data.data.username