函數不執行任何操作

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