在组件间传递数据reactjs

Question

我是reactjs中的新成员，我使用reactjs创建了一个演示项目。在我的应用程序中，我在屏幕上显示数据时遇到了问题。这里是我的代码

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, 
} 

在此我打电话组件Users

这里是用户组件文件：

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

您在构造函数中忘了bindUserList方法

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

只要你ge t的结果，简单地通过它map。 （我也假设person有至少id和name属性）

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

Answer 2

尝试以下。
1.渲染Users仅当有数据，所以

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, 
} 

迭代用户中的用户部件以显示数据

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> 
    ) 
}