Question

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

我提取的数据如下所示：

mRequestQueue.cancelAll(TAG);

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

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

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

<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> == $0 <div></div> </div>传递给包含<Message key={index} data={message} />

的消息组件

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

将代码重构为：{this.props.message}但会返回错误

<div> key={index} data={message} </div>

看到项目项目有密钥我不相信CreateFragment是正确的解决方案。此外，Firebase倾向于使用密钥通过数组传递对象，因此我给出的解决方案在这种情况下似乎不起作用。但是，如何控制对象在页面上的呈现方式呢？

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

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.

谢谢！

编辑：将消息组件呈现更改为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;，因为消息组件未收到消息支持。

Answer 1

将Message渲染方法更改为：

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

Answer 2

您正在通过名称data将道具传递给邮件组件，并使用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子对象（找到：具有键{object，title，key}的对象）。我将道具从一个物体改为一个阵列。最后，我将我的消息组件更改为this.props.data，因为没有传递任何消息道具，因为其他海报已经注意到了。

数组修复：

.filter('dateFormat', function() {
    return function(dt) {
        var dt = new Date(dt);
        return (dt.getMonth()+1)+'/'+dt.getDate()+'/'+dt.getFullYear();
    };
  })

非常感谢您的帮助！

在React中渲染JavaScript对象

3 个答案: