在 React 中渲染 JavaScript 对象

Question

我设置了一个 React 项目以从 Firebase 数据库中获取一个对象并将其呈现到我的页面。但是我不知道如何正确呈现数据。

我正在获取的数据如下所示：

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

在 Chrome React Debugger 中我看到了这个：

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

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

<div>
    <div></div> == [=13=]
    <div></div>
</div>

目前我正在将 <Message key={index} data={message} /> 传递给包含 {this.props.message}

的消息组件

编辑：将此更改为 {this.props.data} 因为没有消息道具被传递给消息组件

将代码重构为：<div> key={index} data={message} </div> 但是 returns 错误

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.

鉴于项目项具有键，我认为 CreateFragment 不是正确的解决方案。此外，Firebase 更喜欢通过数组传递带有键的对象，因此我给出的解决方案在这种情况下似乎不起作用。但是我怎样才能控制对象在页面上的呈现方式？

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

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;

谢谢！

编辑：将 Message 组件渲染更改为 {this.props.data}，因为 Message 组件没有接收到消息 prop。

Answer 1

将您的 Message 渲染方法更改为：

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

Answer 2

您按名称 data 将 prop 传递给消息组件并使用 this.props.message 渲染它，这是错误的。

使用this.props.data.

export default class Message extends React.Component {

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

}

Answer 3

关于错误`对象作为 React 子项无效（找到：具有键 {function, title, key} 的对象）。我将道具从对象更改为数组。最后，我将消息组件更改为 this.props.data，因为没有像其他发帖者所指出的那样传递消息道具。

数组修正：

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

非常感谢您的帮助！

在 React 中渲染 JavaScript 对象

Rendering JavaScript Object in React

javascript

javascript-objects

reactjs

firebase-realtime-database