약속 오류: 개체가 반응 자식 개체로 유효하지 않습니다.

약속 오류: 개체가 반응 자식 개체로 유효하지 않습니다.

사용자 에이전트를 사용하여 json을 상태로 설정하려고 하면 다음 오류가 나타납니다.

적발되지 않은 불변 위반:개체가 React 하위 개체로 유효하지 않습니다(찾은 개체: 키가 {...}인 개체).}). 자녀 컬렉션을 렌더링하는 경우 어레이를 대신 사용하거나 React 애드온에서 createFragment(개체)를 사용하여 개체를 래핑합니다.

method to set state:

 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>
    );
}

service

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.');
                }
            });
    }

Json

{
"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
},......
]}

이 작업을 수행할 수 없습니다.{this.state.arrayFromJson}당신의 오류가 시사하듯이 당신이 하려는 일은 유효하지 않습니다.전체 어레이를 React 하위 항목으로 렌더링하려고 합니다.이것은 유효하지 않습니다.배열을 반복하여 각 요소를 렌더링해야 합니다.사용하고 있다.map그렇게 할 수 있어요.

React를 사용하여 어레이에서 요소를 렌더링하는 방법을 배울 수 있는 링크를 붙여넣습니다.

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

도움이 됐으면 좋겠다!

개체 배열을 반환할 수는 없습니다. 개체 배열을 렌더링하는 방법을 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>
  );
}

언급URL : https://stackoverflow.com/questions/37997893/promise-error-objects-are-not-valid-as-a-react-child