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）错误：对象无效反应子（找到：带键的对象如果你想渲染一个子集合，使用数组或使用包装对象来自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

对象在React中无效

1 个答案: