函数不执行任何操作

Question

Basically, I am sending an array of objects into my function as a parameter, but the function doesn't do anything. When I want to print out my array of objects, I can show all items on the console, however, I cannot render them.

renderComment() function doesn't work or doesn't return anything. Also you can take a closer look at my render method, you will see that commented code to print out the expected output of renderComment in the console.

class DishDetails extends Component {

    renderDish(dish) {
        if (dish) {
            return (
                <div>
                    <Card className="col-12 col-md-5 m-1">
                        <CardImg width="100%" src={dish.image} alt={dish.name} />
                        <CardBody>
                            <CardTitle>{dish.name}</CardTitle>
                            <CardText>{dish.description}</CardText>
                        </CardBody>
                    </Card>


                </div>
            )
        } else {
            return (
                <div></div>
            )
        }
    }

    renderComments(comments) {
        comments.map(comment => {
            return (
                <li key={comment.id}>
                    <p>{comment.comment}</p>
                    <p>{comment.author}</p>
                </li>

            )
        })

    }

    render() {
        const selected = this.props.selectedDish;
           /*   if(selected) {
                  this.props.selectedDish.comments.map(comment => {
                      console.log(comment.comment)
                  })
              } */
        return (
            <div>
                {selected &&
                    <div>
                        {this.renderDish(this.props.selectedDish)}
                        {this.renderComments(this.props.selectedDish.comments)}

                    </div>
                }

            </div>
        )

    }
}

export default DishDetails

Answer 1

The renderComment function does not return anything because there is no return statement in the function. There is a return in the map (which is still required), but that is not the return for the function.

To fix this, add a return at the top of renderComment , like this:

renderComment(comments) {
    return comments.map(comment => {
        return (
            <li key={comment.id}>
                <p>{comment.comment}</p>
                <p>{comment.author}</p>
            </li>
        )
    }
}