javascript - 函数不执行任何操作

Question

基本上，我将一个对象数组作为参数发送到我的函数中，但该函数不执行任何操作。当我想打印出对象数组时，我可以在控制台上显示所有项目，但是我无法渲染它们。

renderComment() 函数不起作用或不返回任何内容。您还可以仔细查看我的 render 方法，您将看到注释代码在控制台中打印出 renderComment 的预期输出。

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

renderComment 函数不返回任何内容，因为函数中没有 return 语句。 map 中有一个return(这仍然是必需的)，但这不是该函数的return。

要解决此问题，请在 renderComment 顶部添加 return，如下所示:

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