社区首页 >问答首页 >ReactJS - Error:对象作为React子对象无效

问ReactJS - Error:对象作为React子对象无效
EN

Stack Overflow用户

提问于 2017-09-26 02:55:47

回答 2查看 5.6K关注 0票数 1

我试图理解在访问和显示检索到的部分JSON对象时做错了什么。我已经将返回的对象存储在返回的每条记录的数组中，并知道如何遍历JSON来访问JS中的正确属性/值，但是，在我的ReactJS组件中，我很难做到同样的事情。我的反应还比较新，似乎无法找到正确的方式来遍历和显示JSON属性和数组。用我目前的设置，我得到Error: Objects are not valid as a React child (found: object with keys {recordDateSlugEdit, ... If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.任何帮助都将是非常感谢的。

返回JSON：

[
  {
    "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": [

    ]
  }
]

在这里，我希望访问位于每个JSON记录中的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>
        );
    }
}

javascript

reactjs

components

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-26 03:02:01

唯一可能是<ul>的子元素是<li>.In，您正在使用的是div。同时你也需要改变

setState({records:data})到setState({records})或setState({records:records})

fetchList() {
    fetch('http://localhost:3000/api/test')
        .then(res => {
            return res.json();
        })  
        .then(data => {
            let records = data.map((record) => {
                return(

                        <li key={record.record_comments.commentId}>{record.record_comments.comment}</li>

                )
            })
            this.setState({ records:records});

        })  
        .catch(err => {
            console.log(err);
        });
}