Weitergabe von Daten zwischen den Komponenten reactjs

Question

Ich bin neu in reactjs, ich erstelle ein Demo-Projekt mit reactjs. In meiner App habe ich Probleme beim Anzeigen der Daten auf dem Bildschirm. hier ist mein Code

import React, {Component} from 'react'; 
import $ from 'jquery'; 
import Users from './userlist'; 
export default class Home extends Component { 
constructor(props) { 
    super(props); 

    this.state = {person: []}; 
    } 

    componentDidMount() { 
    console.log("componentDidMount") 
    this.UserList(); 
    } 

    UserList() { 
    return $.getJSON('/react/getUsers') 
     .then((data) => { 
     this.setState({ person: data.data }); 
     }); 
    } 

    render() { 
    return (
    <div> 
      <Users getUserData = {this.state.person}></Users> 
    </div> 

    ) 
    } 
} 

Home.contextTypes = { 
    router: React.PropTypes.object.isRequired, 
} 

in diesem Zusammenhang die Komponente anzurufenden Users

Hier wird der Benutzer Komponentendatei:

import React, {Component} from 'react'; 
import $ from 'jquery'; 
export default class Users extends Component { 
    render() { 
    console.log(this.props.getUserData)// contains array of objects which am wants to show 
    return(

      <div className="experience-item"> 
      <div className="experience-content experience-color-blue"> 
       <h4>value should be here</h4> 
       <h6>value should be here</h6> 
       <p>value should be here</p> 
      </div> 
      </div> 
    ) 
    } 
} 

Answer 1

Sie haben vergessen zu bindUserList Methode im Konstruktor

constructor() { 
    this.state = { person: [] } 
    this.UserList = this.UserList.bind(this) 
} 

Sobald Sie ge t das Ergebnis, einfach map durch. (Ich gehe davon aus, dass auch person mindestens id und name Eigenschaften)

{this.props.getUserData.map(user => <div key={user.id}>{user.name}</div>)} 

Answer 2

Versuche folgen.
1. Render Users nur, wenn Sie Daten haben, so

import React, {Component} from 'react'; 
import $ from 'jquery'; 
import Users from './userlist'; 
export default class Home extends Component { 
constructor(props) { 
    super(props); 

    this.state = {person: []}; 
    } 

    componentDidMount() { 
    console.log("componentDidMount") 
    this.UserList(); 
    } 

    UserList() { 
    return $.getJSON('/react/getUsers') 
     .then((data) => { 
     this.setState({ person: data.data }); 
     }); 
    } 

    render() { 
    return (
    <div> 
     { 
     (this.state.person && this.state.person.length) ? <Users getUserData = {this.state.person} /> : "" 
     } 
    </div> 

    ) 
    } 
} 

Home.contextTypes = { 
    router: React.PropTypes.object.isRequired, 
} 

2. Iterate Benutzerdaten angezeigt werden in Benutzer Component
   

   export default class Users extends Component { 
       render() { 
       return(
        <div> 
        { 
   
        this.props.getUsersData.map((user, index) => { 
        return (
         <div> 
         <div className="experience-item"> 
          <div className="experience-content experience-color-blue"> 
          <h4>{user.name}</h4> 
          <h6>{user.details}</h6> 
          <p>{user.content}</p> 
         </div> 
         </div> 
        ) 
        }) 
        } 
        <div> 
       ) 
   }