有什么明显的原因这不会呈现吗？

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

没有错误被抛出，但是当页面加载时，周围的菜单出现，并且获取请求 returns 一个数组并且应该将它映射到 'Rating' 组件，但没有映射显示评分卡。

Answer 1

在您的地图中，您没有 return 评级等...因为您使用 { 来定义代码块，您必须键入 return。并且由于它是多行的，所以使用parens来标记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}
                />)

有什么明显的原因这不会呈现吗？

Is there any obvious reason this won't render?

render

reactjs

redux