Javascript ReactJS-错误：对象作为React子对象无效_Javascript_Reactjs_Components

Javascript ReactJS-错误：对象作为React子对象无效

javascript reactjs

Javascript ReactJS-错误：对象作为React子对象无效,javascript,reactjs,components,Javascript,Reactjs,Components,我试图理解访问和显示检索到的JSON对象的一部分时我做错了什么。对于返回的每个记录，我都将返回的对象存储在一个数组中，并且知道如何遍历JSON以访问JS中正确的属性/值，但是，我在ReactJS组件中也很难做到这一点。我还没有做出反应，似乎无法找到遍历和显示JSON属性和数组的正确方法。在我当前的设置中，我得到错误：对象作为React子对象无效（找到：带有键的对象{recordDateSlugEdit，…。如果要呈现子对象的集合，请使用数组，或者使用React附加组件中的createFragme

我试图理解访问和显示检索到的JSON对象的一部分时我做错了什么。对于返回的每个记录，我都将返回的对象存储在一个数组中，并且知道如何遍历JSON以访问JS中正确的属性/值，但是，我在ReactJS组件中也很难做到这一点。我还没有做出反应，似乎无法找到遍历和显示JSON属性和数组的正确方法。在我当前的设置中，我得到

错误：对象作为React子对象无效（找到：带有键的对象{recordDateSlugEdit，…。如果要呈现子对象的集合，请使用数组，或者使用React附加组件中的createFragment（对象）包装对象。

任何帮助都将不胜感激

返回的JSON Blob:

[
  {
    "recordDateSlugEdit": "2017-08-17",
    "recordId": 119,
    "title": "POS Core Campaign CPL Rose 40%",
    "created_at": "2017-09-01T11:57:28.561Z",
    "updated_at": "2017-09-01T11:57:45.798Z",
    "user_id": 237,
    "category_id": 81,
    "app_user": {
      "userIdHash": "",
      "fullNameSlug": "Steve Matthews",
      "firstName": "Steve",
      "lastName": "Matthews"
    },
    "category": {
      "categoryIdHash": "",
      "categoryName": "Organic"
    },
    "record_comments": [
      {
        "createdAtDateSlug": "9\/1\/2017 8:13 AM",
        "commentId": 11,
        "comment": "Donec sem sapien, scelerisque fermentum interdum at, imperdiet vel dolor. Pellentesque fringilla elit eget risus maximus, aliquet luctus odio luctus. Sed pretium",
        "recordId": 119,
        "userId": 236,
        "created_at": "2017-09-01T12:13:23.557Z",
        "updated_at": "2017-09-01T12:13:23.557Z",
        "record_id": 119,
        "user_id": 236,
        "app_user": {
          "userIdHash": "oqX1p3EO5b",
          "fullNameSlug": "Brad Feld",
          "userId": 236,
          "firstName": "Brad",
          "lastName": "Feld",
        }
      }
    ]
  },
  {
    "recordDateSlugEdit": "2017-08-08",
    "recordId": 118,
    "title": "Added New CTA to Pricing Page",
    "user_id": 236,
    "category_id": 82,
    "app_user": {
      "userIdHash": "",
      "fullNameSlug": "Brad Feld",
      "firstName": "Brad",
      "lastName": "Feld",
    },
    "category": {
      "categoryIdHash": "",
      "categoryName": "Website"
    },
    "record_comments": [

    ]
  }
]

import React from 'react';
import fetch from 'node-fetch';


//Comment Form
class CommentForm extends React.Component{
    render() {
        return (
            <form action="/app/record/comment" method="post">
            </form>
        )
    }
};

//Comments List
class Comments extends React.Component{

    constructor(props, context) {
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || {records: []};
    }

    fetchList() {
        fetch('http://localhost:3000/api/test')
            .then(res => {
                return res.json();
            })  
            .then(data => {
                let records = data.map((record) => {
                    return(
                        <div key={record.record_comments.commentId}>
                            <li>{record.record_comments.comment}</li>
                        </div>
                    )
                })
                this.setState({ records: data });
            })  
            .catch(err => {
                console.log(err);
            });
    }

    componentDidMount() {
        this.fetchList();
    }

    render() {
        return (
            <div>
            <h2>Comments List</h2>
            <ul>
                {this.state.records}
            </ul>
            </div>
        )
    }
};

//Comment Container
export default class CommentBox extends React.Component {

    render() {
        return (
            <div className="record-comment-form">
                <h1>Sweet it Worked</h1>
                <CommentForm />
                <hr />
                <Comments />
            </div>
        );
    }
}

我希望访问位于每个JSON记录中的

record\u comments

数组中的对象上的属性

这是我的组件设置：

[
  {
    "recordDateSlugEdit": "2017-08-17",
    "recordId": 119,
    "title": "POS Core Campaign CPL Rose 40%",
    "created_at": "2017-09-01T11:57:28.561Z",
    "updated_at": "2017-09-01T11:57:45.798Z",
    "user_id": 237,
    "category_id": 81,
    "app_user": {
      "userIdHash": "",
      "fullNameSlug": "Steve Matthews",
      "firstName": "Steve",
      "lastName": "Matthews"
    },
    "category": {
      "categoryIdHash": "",
      "categoryName": "Organic"
    },
    "record_comments": [
      {
        "createdAtDateSlug": "9\/1\/2017 8:13 AM",
        "commentId": 11,
        "comment": "Donec sem sapien, scelerisque fermentum interdum at, imperdiet vel dolor. Pellentesque fringilla elit eget risus maximus, aliquet luctus odio luctus. Sed pretium",
        "recordId": 119,
        "userId": 236,
        "created_at": "2017-09-01T12:13:23.557Z",
        "updated_at": "2017-09-01T12:13:23.557Z",
        "record_id": 119,
        "user_id": 236,
        "app_user": {
          "userIdHash": "oqX1p3EO5b",
          "fullNameSlug": "Brad Feld",
          "userId": 236,
          "firstName": "Brad",
          "lastName": "Feld",
        }
      }
    ]
  },
  {
    "recordDateSlugEdit": "2017-08-08",
    "recordId": 118,
    "title": "Added New CTA to Pricing Page",
    "user_id": 236,
    "category_id": 82,
    "app_user": {
      "userIdHash": "",
      "fullNameSlug": "Brad Feld",
      "firstName": "Brad",
      "lastName": "Feld",
    },
    "category": {
      "categoryIdHash": "",
      "categoryName": "Website"
    },
    "record_comments": [

    ]
  }
]

import React from 'react';
import fetch from 'node-fetch';


//Comment Form
class CommentForm extends React.Component{
    render() {
        return (
            <form action="/app/record/comment" method="post">
            </form>
        )
    }
};

//Comments List
class Comments extends React.Component{

    constructor(props, context) {
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || {records: []};
    }

    fetchList() {
        fetch('http://localhost:3000/api/test')
            .then(res => {
                return res.json();
            })  
            .then(data => {
                let records = data.map((record) => {
                    return(
                        <div key={record.record_comments.commentId}>
                            <li>{record.record_comments.comment}</li>
                        </div>
                    )
                })
                this.setState({ records: data });
            })  
            .catch(err => {
                console.log(err);
            });
    }

    componentDidMount() {
        this.fetchList();
    }

    render() {
        return (
            <div>
            <h2>Comments List</h2>
            <ul>
                {this.state.records}
            </ul>
            </div>
        )
    }
};

//Comment Container
export default class CommentBox extends React.Component {

    render() {
        return (
            <div className="record-comment-form">
                <h1>Sweet it Worked</h1>
                <CommentForm />
                <hr />
                <Comments />
            </div>
        );
    }
}

从“React”导入React；
从“节点获取”导入获取；
//评论表
类CommentForm扩展了React.Component{
render（）{
返回(
)
}
};
//评论列表
类注释扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.state=this.context.data | | window.uu INITIAL_ustate uuu| |{记录：[]}；
}
fetchList（）{
取（'http://localhost:3000/api/test')
。然后（res=>{
返回res.json（）；
})  
。然后（数据=>{
让记录=数据.map（（记录）=>{
返回(
{record.record_comments.comment}
)
})
this.setState（{records:data}）；
})  
.catch（错误=>{
控制台日志（err）；
});
}
componentDidMount（）{
这是fetchList（）；
}
render（）{
返回(
评论列表

{this.state.records}

)
}
};
//注释容器
导出默认类CommentBox扩展React.Component{
render（）{
返回(
好极了，它起作用了

);
}
}
唯一可能是的子元素是。在您的情况下，您使用的是div。
您还需要更改

setState（{records:data}）
tosetState（{records}）
或setState（{records:records}）

fetchList（）{
取（'http://localhost:3000/api/test')
。然后（res=>{
返回res.json（）；
})  
。然后（数据=>{
让记录=数据.map（（记录）=>{
返回(
{record.record\u comments.comment}
)
})
this.setState（{records:records}）；
})  
.catch（错误=>{
控制台日志（err）；
});
}
唯一可能是的子元素是。在您的情况下，您使用的是div。
您还需要更改

setState（{records:data}）
tosetState（{records}）
或setState（{records:records}）

fetchList（）{
取（'http://localhost:3000/api/test')
。然后（res=>{
返回res.json（）；
})  
。然后（数据=>{
让记录=数据.map（（记录）=>{
返回(
{record.record\u comments.comment}
)
})
this.setState（{records:records}）；
})  
.catch（错误=>{
控制台日志（err）；
});
}
在
this.setState({ records: data });

数据-不是有效的dom元素。
试着用
this.setState({ records });

因为记录-似乎是jsx元素的数组。
在
this.setState({ records: data });

数据-不是有效的dom元素。
试着用
this.setState({ records });

因为记录-似乎是jsx元素的数组。
我猜这只是一个台风。您的setState
内部fetchList
应该是this.setState（{records}）
也不应该在fetch中生成JSX。你应该在render
中生成JSX。我想这只是一个台风。你的setState
内部fetchList
应该是this.setState（{records}）；
也不应该在fetch中生成JSX。你应该在render
中生成JSX。但是错误不是因为这个，主要是因为state错误不是因为这个，主要是因为state