ReactJS - 錯誤：對象作爲一個React子無效

我想了解我在做什麼訪問和顯示部分檢索到的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> 
     ); 
    } 
}

來源

2017-09-26 cphill

它只是一個颱風，我猜。你的'fetchList'中的'setState'應該是'this.setState（{records}）;' – Panther

也不應該在fetch中產生JSX。你應該在'render'中做。 – Panther

可能的<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); 
     }); 
}

來源

2017-09-26 11:02:01 Ved

這個錯誤不是因爲這個，它主要是因爲國家 –

是的。映射是錯誤的。謝謝。更新答案。 – Ved

看來，在

this.setState({ records: data });

數據 - 不是一個有效的DOM元素。嘗試記錄以來與

this.setState({ records });

來取代它 - 似乎是JSX元素的數組。

來源

2017-09-26 11:03:14 kurumkan

ReactJS - 錯誤：對象作爲一個React子無效

回答

相關問題