Question

我要引入一个对象数组，并将它们映射到另一个要渲染的组件。

  renderRatings(){
        if(this.props.ratings.length > 0){
            return this.props.ratings.map(rating => {
                <Rating 
                    id={rating.id}
                    title={rating.title}
                    value={rating.value}
                />
            });
        }
    }

这是我渲染功能的地方。

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

这是我要填充并呈现的组件。

class Rating extends Component{

    componentDidMount(){
        console.log("props equal:", this.props)
    }

    render() {
        return (
            <div className="card darken-1" key={this.props._id}>
                <div className="card-content">
                <span className="card-title">{this.props.title}</span>
                <p>{this.props.value}</p>
                <button>Edit</button>
                <button onClick={() => this.deleteRating(this.props._id)}>Delete</button>
            </div>
        </div>
        );
    }
}

  export default connect({ deleteRating })(Rating);

没有引发任何错误，但是在页面加载时，出现了周围的菜单，并且获取请求返回了一个数组，并假定将其映射到“评分”组件，但是没有映射的评分卡出现。

Answer 1

在您的地图中，您没有返回Rating等...，因为您使用了{来定义代码块，因此必须键入return。并且由于它是多行，因此请使用括号来标记Rating组件的开始和结束。

return this.props.ratings.map(rating => {
                <Rating 
                    id={rating.id}
                    title={rating.title}
                    value={rating.value}
                />

需要成为

return this.props.ratings.map(rating => {
                return (<Rating 
                    id={rating.id}
                    title={rating.title}
                    value={rating.value}
                />)

有任何明显的原因将无法渲染吗？

1 个答案: