对象在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未被教（在承诺中）错误：对象无效作为一个 REACT儿童（发现：带钥匙的对象，如果您打算渲染 收集儿童，改用阵列或使用 来自React附加组件的CreateFragment（对象）。检查渲染方法 App。（…）

如何修复它，以便显示来自后端的所有数据？

Answer 1

this.setState({
    data:response                 
});

此处的代码部分分配了对状态变量data的响应（对象）然后：

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

也尝试渲染对象，但反应不知道如何渲染对象。要获取数据使用：

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

从现在开始，data=response和Axios响应具有称为data的属性，该属性保存实际数据。如果有机会数据也是对象（JSON数据），则必须访问特定的密钥，例如

this.state.data.data.username