Rendern eines JavaScript-Objekts in React

Question

Ich habe ein React-Projekt eingerichtet, um ein Objekt aus einer Firebase-Datenbank zu holen und dieses auf meine Seite zu rendern. Ich weiß jedoch nicht, wie man die Daten richtig rendert.

Die Daten Ich bin wie folgt aussieht holen:

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

Im Chrome Debugger Reagieren Ich sehe dies:

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

Aber in den Elementen sehe ich einfach zwei leere Divs sehe:

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

Zur Zeit übergebe ich <Message key={index} data={message} /> an eine Nachrichtenkomponente, dieenthält

EDIT: Changed dies {this.props.data}, da keine Nachricht prop wurde an Message-Komponente übergeben

den Code Refactoring: <div> key={index} data={message} </div> jedoch liefert den Fehler

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.

Da die Projektelemente Schlüssel enthalten, glaube ich nicht, dass CreateFragment die richtige Lösung ist. Auch Firebase favorisiert das Übergeben von Objekten mit Schlüsseln über Arrays, so dass die Lösungen, die mir gegeben wurden, in dieser Situation nicht zu funktionieren scheinen. Aber wie kann ich dann steuern, wie die Objekte auf der Seite gerendert werden?

Meine komplette Project Komponente sieht wie folgt aus:

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; 

Dank!

Bearbeiten: die Nachricht Komponente Render in {this.props.data} als Nachricht Komponente erhält keine Nachricht prop. Geändert.

Answer 1

Ihre Message Render-Methode ändern:

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

Answer 2

Sie sind die Stütze an die Nachrichtenkomponente namentlich vorbei data und Rendering mit this.props.message was falsch ist.

Verwenden Sie this.props.data.

export default class Message extends React.Component { 

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

} 

Answer 3

In Bezug auf den Fehler `Objekte sind nicht gültig als Kind reagiert (gefunden: Objekt mit den Tasten {Funktion, Titel, key}). Ich habe meine Requisite von einem Objekt in ein Array geändert. Schließlich habe ich meine Nachrichtenkomponente in this.props.data geändert, da keine Nachrichtenstütze übergeben wurde, wie die anderen Poster bemerkt haben.

Das Array fix:

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

Vielen Dank für die Hilfe!