Promise 错误：对象作为 React 子对象无效

IT技术 reactjs superagent
2021-03-24 13:44:00

我正在尝试使用用户代理将 json 设置为状态，但出现错误：

Uncaught Invariant Violation：对象作为 React 子对象无效（发现：对象带有键 {...}）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。

设置状态的方法： 
 getInitialState: function(){
    return {
        arrayFromJson: []
    }
},

loadAssessmentContacts: function() {
    var callback = function(data) {
        this.setState({arrayFromJson: data.schools})
    }.bind(this);

    service.getSchools(callback);
},

componentWillMount: function(){
    this.loadAssessmentContacts();
},

onTableUpdate: function(data){

    console.log(data);

},

render: function() {

    return (
        <span>{this.state.arrayFromJson}</span>
    );
}
服务 
getSchools : function (callback) {
        var url = 'file.json';
       request
            .get(url)
            .set('Accept', 'application/json')
            .end(function (err, res) {
                if (res && res.ok) {
                    var data = res.body;
                    callback(data);

                } else {
                    console.warn('Failed to load.');
                }
            });
    }
杰森 
{
"schools": [
{
  "id": 4281,
  "name": "t",
  "dfe": "t",
  "la": 227,
  "telephone": "t",
  "address": "t",
  "address2": "t",
  "address3": "t",
  "postCode": "t",
  "county": "t",
  "ofsted": "t",
  "students": 2,
  "activeStudents": 2,
  "inActiveStudents": 0,
  "lastUpdatedInDays": 0,
  "deInstalled": false,
  "inLa": false,
  "status": "unnassigned",
  "authCode": "t",
  "studentsActivity": 0
},......
]}
2个回答

你不能这样做：{this.state.arrayFromJson}因为你的错误表明你试图做的事情是无效的。您正在尝试将整个数组呈现为 React 子项。这是无效的。您应该遍历数组并呈现每个元素。我.map经常这样做。

我正在粘贴一个链接，您可以从中学习如何使用 React 渲染数组中的元素。

http://jasonjl.me/blog/2015/04/18/rendering-list-of-elements-in-react-with-jsx/

希望能帮助到你！

我有同样的问题，但是当我尝试 .map 时，它说我映射的东西“不是函数”。
2021-06-11 13:44:00
看看这是否对您有帮助：stackoverflow.com/questions/30142361/... @Ant
2021-06-21 13:44:00

你不能只返回一个对象数组，因为没有任何东西告诉 React 如何渲染它。您需要返回一组组件或元素，例如：

render: function() {
  return (
    <span>
      // This will go through all the elements in arrayFromJson and
      // render each one as a <SomeComponent /> with data from the object
      {this.state.arrayFromJson.map(function(object) {
        return (
          <SomeComponent key={object.id} data={object} />
        );
      })}
    </span>
  );
}
其它你可能感兴趣的问题
上一篇Google 地图中的“您已超出此 API 的请求配额” 下一篇react代理错误：无法将请求 /api/ 从 localhost:3000 代理到 http://localhost:8000 (ECONNREFUSED)