Есть ли очевидная причина, по которой это не будет отображаться?

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

на вашей карте, вы не возвращаете рейтинг и т. Д. ... потому что вы использовали {для определения блока кода, вы должны ввести 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}
                />)