Javascript 反应：Componentdidupdate，无法访问对象值

我无法从对象键访问该值

componentDidUpdate(prevProps) {
        if (prevProps !== this.props) {
            console.log("component did update in top menu", this.props.topmenudata[0])
            this.setState({
            });
        }
    }

在上面的方法中，我通过props将一些数据传递给我的子组件，并通过.topmenudata访问它

当我使用console.log（this.props.topmenudata[0]）时，我得到以下对象

{baudrate: "1200", databits: "7", parity: "even", stopbits: "1"}

0: {baudrate: "1200", databits: "7", parity: "even", stopbits: "1"}
length: 1
__proto__: Array(0)

当我使用console.log（this.props.topmenudata）时，我得到以下对象

{baudrate: "1200", databits: "7", parity: "even", stopbits: "1"}

0: {baudrate: "1200", databits: "7", parity: "even", stopbits: "1"}
length: 1
__proto__: Array(0)

然而，当我试图从对象获取波特率值时，通过

console.log(this.props.topmenudata[0]["baudrate"])

我得到了以下回复

Cannot read property 'baudrate' of undefined

我已经检查了我通过的数据类型

typeof(this.props.topmenudata[0])

这表明我确实得到了一个物体

---

我错过了什么？componentdidupdate方法中是否缺少某些内容？

将您的

控制台记录在检查对象是否存在的内部。第一次调用
componentDidUpdate
时，
topmenudata
可能是一个空列表。然后在将来的一些更新中，将填充该列表，您将获得在第一个
控制台.log中看到的有效数据。在您的示例中，您尝试获取
波特率
，但您永远无法获得未来的
组件diddupdate
调用，因为第一个调用会产生执行中断错误

componentDidUpdate(prevProps) {
    if (this.props.topmenudata && this.props.topmenudata.length > 0) {
        console.log(this.props.topmenudata[0]);
    }
}

编辑：

这不是你的问题的一部分，但是你很快就会遇到代码的另一个问题，在这个问题上，你的componentDidUpdate代码将在每次组件更新时触发，而不仅仅是在道具不同的时候

这是因为您在
prevProps！==此.props
将始终计算为
true
，因为您正在比较对象引用。在Javascript中，
{}=={}
是
false

相反，您希望从
prevProps
和
this.props
中检查两种基本类型（如
字符串
或
数字
）的相等性，您只希望代码在更新时运行。比如：

componentDidUpdate(prevProps) {
    if (this.props.topmenudata && this.props.topmenudata.length > 0) {
        let propsHaveChanged = false;
        this.props.topmenudata.forEach((serialInfo, index) => {
            if (!prevProps.topmenudata[index]) return;

            if (prevProps.topmenudata[index].baudrate !== serialInfo.baudrate) {
                propsHaveChanged = true;
            }
        });

        if (propsHaveChanged) {
            // run my code
        }
    }
}

虽然这个get非常复杂，但是非常快，所以如果您没有信心，我建议您研究一下预构建的深度比较函数，比如下划线.js或lodash.js提供的函数

将您的
控制台记录在检查对象是否存在的内部。第一次调用
componentDidUpdate
时，
topmenudata
可能是一个空列表。然后在将来的一些更新中，将填充该列表，您将获得在第一个
控制台.log中看到的有效数据。在您的示例中，您尝试获取
波特率
，但您永远无法获得未来的
组件diddupdate
调用，因为第一个调用会产生执行中断错误

componentDidUpdate(prevProps) {
    if (this.props.topmenudata && this.props.topmenudata.length > 0) {
        console.log(this.props.topmenudata[0]);
    }
}

编辑：

这不是你的问题的一部分，但是你很快就会遇到代码的另一个问题，在这个问题上，你的componentDidUpdate代码将在每次组件更新时触发，而不仅仅是在道具不同的时候

这是因为您在
prevProps！==此.props
将始终计算为
true
，因为您正在比较对象引用。在Javascript中，
{}=={}
是
false

相反，您希望从
prevProps
和
this.props
中检查两种基本类型（如
字符串
或
数字
）的相等性，您只希望代码在更新时运行。比如：

componentDidUpdate(prevProps) {
    if (this.props.topmenudata && this.props.topmenudata.length > 0) {
        let propsHaveChanged = false;
        this.props.topmenudata.forEach((serialInfo, index) => {
            if (!prevProps.topmenudata[index]) return;

            if (prevProps.topmenudata[index].baudrate !== serialInfo.baudrate) {
                propsHaveChanged = true;
            }
        });

        if (propsHaveChanged) {
            // run my code
        }
    }
}

虽然这个get非常复杂，但是非常快，所以如果您没有信心，我建议您研究一下预构建的深度比较函数，比如下划线.js或lodash.js提供的函数

您是否尝试过此.props.topmenudata[0]。波特率？？？@ridhi yes返回无法读取未定义的属性波特率。请尝试此操作。props.topmenudata[0]。波特率？？？@ridhi yes返回无法读取的属性波特率undefined@Dustyik看起来您在不久的将来可能会遇到对象比较问题，你可能希望检查我的编辑会做什么！！！！再次感谢您的帮助！！非常感谢：）@Dustyik看起来您在不久的将来可能会遇到对象比较的问题，您可能希望检查我的editwill！！！！再次感谢您的帮助！！非常感谢：）