Question

所以我从React开始，我有这两个组件。

在第一个组件中，我想用map（）函数迭代一个对象数组（可以工作）并调用另一个组件，现在只返回一个简单的h1标签。

好吧，没有调用任何内容，控制台中没有错误。我认为问题出现在renderAvatarData()的返回句中（如果我在返回句子后执行console.log它似乎没有到达那里但是如果console.log在返回之前调用它）

HomePageBoxesData.js

import React, { Component } from 'react';

import AvatarDetails from './AvatarDetails';

class HomePageBoxesData extends Component{

  constructor(props) {
    super(props);   
  };

  renderAvatarData(){
    this.props.data.map(data => {
        return <AvatarDetails data={data}/>     
    });
  }

  render(){
    return(
        <div>
            {this.renderAvatarData()}
        </div>
     );
   }
};

export default HomePageBoxesData;

AvatarDetails.js

import React, { Component } from 'react';

class AvatarDetails extends Component{

    constructor(props) {
      super(props); 
    };

    render(){
       return(
         <h1>Hello World</h1>
       );
    }
};

export default AvatarDetails;

Answer 1

问题在renderAvatarData()方法中，您忘记将return与map一起使用，请使用此项：

renderAvatarData(){
    return this.props.data.map((data)=>{
        return <AvatarDetails data={data}/>

    });
}

由于您只想return组件，您可以直接编写它：

renderAvatarData(){
    return this.props.data.map(data => <AvatarDetails data={data} /> );
}

Answer 2

我同意Mayank Shukla但我通常在这种情况下使用这种方法：

render() {
        return(
        <div>
        _.map(this.props.data, function(value, key){
          return(
            <AvatarDetails key={key} data={value} />
          )
        })
       </div>

我不确定是否有一个比另一个更好

尝试调用组件内的组件 - React

2 个答案: