Question

我无法从对象键访问值。

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

在上述方法中，我已通过prop将一些数据传递给子组件，并且可以通过.topmenudata

访问

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

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

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

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方法中是否缺少即时消息？

Answer 1

将console.log放入检查对象是否存在。第一次调用componentDidUpdate时，topmenudata可能是一个空列表。然后，在将来的更新中，将填充列表，您将获得在第一个console.log中看到的有效数据。在您尝试获得baudrate的示例中，您永远不会到达将来的componentDidUpdate调用，因为第一个调用会产生执行中断错误。

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

编辑：

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

这是因为您在prevProps !== this.props中进行的比较将始终评估为true，因为您正在比较对象引用。在Javascript中，{} === {}是false。

相反，您想从strings和numbers内部检查两个原始类型（例如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
        }
    }
}

尽管这很快就会变得很复杂，所以如果您不确定，我建议您研究一下预先构建的深度比较函数，例如underscore.js或lodash.js提供的函数。

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

1 个答案: