Javascript I'；我可以访问对象（通过道具传递到此方法），但无法访问对象'；s数据

我已经将props.selectedDish对象从DishDetail功能组件传递到这个方法中，并且能够访问对象本身。然而，当我试图访问对象内部的数据时，只会打印“未定义”——这怎么可能呢除了显示正在进行的奇怪活动的屏幕截图外，请参见下面的DishDetail和RenderDish方法：

    import {Card, CardBody, CardImg, CardImgOverlay, CardText, CardTitle} from "reactstrap";
import React from "react";
import CardColumns from "reactstrap/es/CardColumns";


function RenderComments(info) {
    console.log('RenderComents', info)
    if (info != null) {
        const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        let commentsArray = [];
        console.log(info)
        for (let i = 0; i < info.length; i++) {
            if (info[i] != null) {
                console.log(info)
                commentsArray.push(info.comment);
                commentsArray.push("\n")
                let date = new Date(info.date)
                commentsArray.push("-- " + info.author + ", " + monthNames[date.getMonth() + 1] + ' ' + date.getDay() + ', ' + date.getFullYear())
                commentsArray.push("\n");
            } else {
                console.log('bing')
                return <div></div>
            }

        }
        // info.map((information) => {
        //         if (information != null) {
        //             console.log(information)
        //             commentsArray.push(information.comment);
        //             commentsArray.push("\n")
        //             let date = new Date(information.date)
        //             commentsArray.push("-- " + information.author + ", " + monthNames[date.getMonth() + 1] + ' ' + date.getDay() + ', ' + date.getFullYear())
        //             commentsArray.push("\n");
        //         } else {
        //             console.log('bing')
        //             return <div></div>
        //         }
        //     });
        if (commentsArray != null) {
            return (
                <div>
                    <h4> Comments </h4>
                    <p1>{commentsArray.map((line) => {
                        console.log(line)
                        return <p>{line}</p>
                    })}
                    </p1>
                </div>
            )
        } else {
            return <div></div>
        }


    }

}

const DishDetail = (props) => {
    console.log('DishDetail', props)
    if (props.selectedDish != null) {
        return (
            <div className={'row'}>
                <div className={"col-12 col-md-5 m-1"}>
                    <RenderDish dish={props.selectedDish}/>
                    <RenderComments info={props.selectedDish.comments}/>
                </div>
            </div>
        )
    } else {
        return (<div></div>)
    }
}


function RenderDish(dish) {
    console.log('RenderDish', dish)
    // Props is the saved state from the constructor (from the app.js file which
    // gave the DISHES data to the menu component, (which imported it from
    // the DISHES.js file)).
    console.log(dish.comments)
    console.log(dish.name)

    return (

            <Card key={dish.id}>
                <CardImg top src={dish.image} alt={dish.name}/>
                <CardBody>
                    <CardTitle> <b>{dish.name}</b> </CardTitle>
                    <CardText> {dish.description} </CardText>
                </CardBody>
            </Card>

    );
}

export default DishDetail;

从“reactstrap”导入{Card，CardBody，CardMg，CardMgOverlay，CardText，CardTitle}；
从“React”导入React；
从“reactstrap/es/CardColumns”导入CardColumns；
函数呈现命令（信息）{
console.log（'RenderComents'，info）
如果（信息！=null）{
const monthNames=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”，
“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”
];
让commentsArray=[]；
控制台日志（信息）
for（设i=0；i{
//如果（信息！=null）{
//console.log（信息）
//commentsArray.push（information.comment）；
//commentsArray.push（“\n”）
//let date=新日期（information.date）
//commentsArray.push（“--”+information.author+”，“+monthNames[date.getMonth（）+1]+”+“+date.getDay（）+”，“+date.getFullYear（））
//commentsArray.push（“\n”）；
//}其他{
//console.log（'bing'）
//返回
//         }
//     });
if（commentsArray！=null）{
返回(
评论
{commentsArray.map（（行）=>{
console.log（行）
返回{line}

})}
)
}否则{
回来
}
}
}
const dishdestail=（道具）=>{
console.log（'dishdealture'，道具）
如果（props.selectedDish！=null）{
返回(
)
}否则{
返回（）
}
}
函数renderish（dish）{
console.log（'renderish'，dish）
//Props是从构造函数保存的状态（从app.js文件
//将菜品数据提供给菜单组件（该组件从
//disks.js文件）。
console.log（dish.comments）
console.log（dish.name）
返回(
{dish.name}
{dish.description}
);
}
导出默认细节；

注意console.log中未定义的返回，但是上面console.log中显示的是完整的dish对象！

函数renderish（dish）{

在上述情况下，您传递给组件的所有道具都将传递到

dish

函数renderish（{dish}）{

因此，如果你像上面所示的那样分解道具，你会得到你想要的实际价值

在

renderish

组件中尝试以下操作

函数renderish（{dish}）{
console.log（'renderish'，dish）
console.log（dish.comments）
console.log（dish.name）
//代码的其余部分
}

下面是另一种访问的方式，如果你不想使用解构

功能渲染器（道具）{

函数渲染器（道具）{
const{dish}=道具；
console.log（'renderish'，dish）
console.log（dish.comments）
console.log（dish.name）
//…代码的其余部分

函数renderish（dish）{

在上述情况下，您传递给组件的所有道具都将传递到

dish

函数renderish（{dish}）{

因此，如果你像上面所示的那样分解道具，你会得到你想要的实际价值

在

renderish

组件中尝试以下操作

函数renderish（{dish}）{
console.log（'renderish'，dish）
console.log（dish.comments）
console.log（dish.name）
//代码的其余部分
}

下面是另一种访问的方式，如果你不想使用解构

功能渲染器（道具）{

函数渲染器（道具）{
const{dish}=道具；
console.log（'renderish'，dish）
console.log（dish.comments）
console.log（dish.name）
//…代码的其余部分

它应该是

info.info

。因为信息本质上是

props

，它将具有

info

属性和

info

数组，如控制台中所示

更好的方法是，在

RenderComments

组件中，从

props

中解构

info

function RenderComments({info}) {
  ...
}

您必须对

RenderDish

执行相同的操作：

function RenderDish({dish}) {
    ...
}

---

它应该是

info.info

。因为info本质上是

props

，它将具有

info

属性和

info

数组，如控制台中所示

更好的方法是，在

RenderComments

组件中，从

props

中解构

info

function RenderComments({info}) {
  ...
}

您必须对

RenderDish

执行相同的操作：

function RenderDish({dish}) {
    ...
}

---

您更改了什么？为什么？原始代码中有什么不正确？没有这些信息，答案就没有用处。@Pointy While