在React中渲染JavaScript对象 [英] Rendering JavaScript Object in React

问题描述

我有一个React项目设置为从Firebase数据库中获取对象并将其呈现给我的页面。然而，我不知道如何正确呈现数据。

我提取的数据如下所示：

<$
projects：{
0：{
title：test，
function： test2
，
1：{
title：test3，
function：test4
}
}
}

在Chrome React调试器中，我看到：

 < div> 
< Message key =0data = {function：test2，title：test，key：0}> ...< / Message> 
< Message key =1data = {function：test4，title：test3，key：1}> ...< / Message> 
< / div> 
  

但是在元素视图中，我只是看到两个空的div：

 < div> 
< div>< / div> == $ 0 
< div>< / div> 
< / div> 
  

目前我正在传递< Message key = {index} data = {消息} /> 添加到包含 {this.props.message}

<编辑：改变这个{this.props.data}，因为没有消息道具传递给消息组件

重构代码： < DIV> key = {index} data = {message}< / div> 然而，返回错误

对象不是作为一个React孩子有效（找到：具有键{function，title，key}的对象）。如果您打算渲染一个子集合，则可以使用一个数组，或者使用React附加组件中的createFragment（object）来包装该对象。检查ProjectList的渲染方法。

看到项目项目有键我不相信CreateFragment是正确的解决方案。此外，Firebase支持将键传递给数组，所以我得到的解决方案似乎不适用于这种情况。但我怎样才能控制如何在页面上呈现对象？

我完整的ProjectList组件如下所示：

  import从react反应; 
从firebase导入firebase; 
从'lodash'导入_; 
导入来自'./Message'的消息
 $ b $ class ProjectList extends React.Component {
 constructor（props）{
 super（props）; 
 this.state = {
 messages：{} 
}; 
 
 this.firebaseRef = firebase.database（）。ref（'projects'）; 
 this.firebaseRef.on（child_added，（msg）=> {
 if（this.state.messages [msg.key]）{
 return; 
} 
 
让msgVal = msg.val（）; 
 msgVal.key = msg.key; 
 this.state.messages [msgVal.key] = msgVal; 
 this.setState（{messages：this.state.messages}）; 
}）; 
 
 $ b $ render（）{
 var messageNodes = _.values（this.state.messages）.map（（message，index）=> {
 （
< Message key = {index} data = {message} /> 
）; 
}）; 
 $ b $ return（
< div> 
 {messageNodes} 
< / div> 
）; 
} 
} 
 
导出默认ProjectList; 
  

谢谢！

编辑：消息组件呈现为 {this.props.data} ，因为消息组件不接收消息道具。

解决方案

render（）{
return< div> {this.props.data}< / div>
}


I have a React project set up to fetch an Object from a Firebase database and render this to my page. However I do not know how to render the data properly.

The data I am fetching looks like this:

{
    "projects": {
        "0": {
            "title": "test",
            "function": "test2"
        },
        "1": {
            "title": "test3",
            "function": "test4"
        }
    }
}

In the Chrome React Debugger I see this:

<div>
    <Message key="0" data={function: "test2", title: "test", key: "0"}>...</Message>
    <Message key="1" data={function: "test4", title: "test3", key: "1"}>...</Message>
</div>

But in the elements view I am simply seeing two empty divs:

<div>
    <div></div> == $0
    <div></div>
</div>

Currently I am passing <Message key={index} data={message} /> to a Message component containing {this.props.message}

EDIT: Changed this to {this.props.data} since no message prop was passed to Message component

Refactoring the code to: <div> key={index} data={message} </div> however returns the error

Objects are not valid as a React child (found: object with keys {function, title, key}). 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. Check the render method of ProjectList.

Seeing as the project items have keys I do not believe CreateFragment is the correct solution. Also Firebase favors passing objects with keys over arrays so the solutions I am given does not seem to work in this situation. But how can I then control how the objects are rendered on the page?

My complete ProjectList component looks like this:

import React from 'react';
import firebase from 'firebase';
import _ from 'lodash';
import Message from './Message'

class ProjectList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      messages: {}
    };

    this.firebaseRef = firebase.database().ref('projects');
    this.firebaseRef.on("child_added", (msg)=> {
      if(this.state.messages[msg.key]){
        return;
      }

      let msgVal = msg.val();
      msgVal.key = msg.key;
      this.state.messages[msgVal.key] = msgVal;
      this.setState({messages: this.state.messages});
    });
  }

   render(){
    var messageNodes = _.values(this.state.messages).map((message, index)=> {
      return (
        <Message key={index} data={message} />
      );
    });

    return (
      <div>
          {messageNodes}
      </div>
    );
  }
}

export default ProjectList;

Thanks!

Edit: changed the Message component render to {this.props.data} as Message component receives no message prop.

解决方案

Change your Message render method to:

render() {
  return <div>{this.props.data}</div>
}

这篇关于在React中渲染JavaScript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！