Question

我试图通过我的React组件中的Jquery $ .getJSON函数访问JSON数据，但我一直收到此错误：

不变违规：缩小的反应错误＃31;访问http://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Busername%2C%20img%2C%20alltime%2C%20recent%2C%20lastUpdate%7D&args[]=以获取完整的消息，或使用非缩小的开发环境获取完整错误和其他有用的警告。

对象无效作为React子对象（找到：具有键{username，img，alltime，recent，lastUpdate}的对象。）

这是我的代码。不知道问题出在哪里.....

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first: '',
      second: ''
    }
  }
  componentDidMount() {
    var self = this;
    $.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent",function(data){
      self.setState({first:data});
      console.log(this.state.first);
    });
  }
  render() {
    return (<div>
      <pre>{this.state.first}</pre>
      <pre>{this.state.second}</pre>
      </div>)
  }

}

ReactDOM.render(<Board />, document.getElementById('mine'));

Answer 1

您无法渲染对象数组。 React知道如何渲染组件。解决方案是映射来自XHR响应的数组，并渲染每个单个对象。

您的渲染功能应如下所示：

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first: [],
      second: []
    }
  }
  componentDidMount() {
    var self = this;
    $.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent",function(data){
      console.log(data)
      self.setState({first:data});
    });
  }
  render() {
    return (
      <div>
            {this.state.first.map((el, i) => <pre key={i}>{JSON.stringify(el, null, ' ')}</pre>)}
      </div>
    )
  }
}

ReactDOM.render(<Board />, document.getElementById('container'));

另请注意我已将初始状态更改为空数组（以便能够映射到它）

使用query get JSON并在我的React组件中使用它

1 个答案: