2017-09-26 58 views
0

我想了解我在做什么访问和显示部分检索到的JSON对象时出错。我将返回的对象存储在数组中,以便返回每条记录,并知道如何遍历JSON以访问JS中的正确属性/值,但是,我正努力在我的ReactJS组件中执行相同的操作。我对React还比较陌生,似乎无法找出正确的方式遍历并显示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.任何帮助将不胜感激。ReactJS - 错误:对象作为一个React子无效

返回的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> 
     ); 
    } 
} 
+1

它只是一个台风,我猜。你的'fetchList'中的'setState'应该是'this.setState({records});' – Panther

+0

也不应该在fetch中产生JSX。你应该在'render'中做。 – Panther

回答

0

可能的<ul>一个孩子<li>。在您使用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); 
     }); 
} 
+0

这个错误不是因为这个,它主要是因为国家 –

+0

是的。映射是错误的。谢谢。更新答案。 – Ved

0

看来,在

this.setState({ records: data }); 

数据 - 不是一个有效的DOM元素。 尝试记录以来与

this.setState({ records }); 

来取代它 - 似乎是JSX元素的数组。

相关问题