错误TypeError:未定义不是对象(计算'child.type.displayName')

问题分析

TypeError: 未定义不是对象 这个错误通常表示你在尝试访问一个未定义（undefined）或空（null）对象的属性。在你的例子中，错误发生在尝试访问 child.type.displayName 时。

原因

1. child 未定义：child 可能是 undefined 或 null。
2. child.type 未定义：即使 child 存在，child.type 也可能是 undefined 或 null。
3. child.type.displayName 未定义：即使 child.type 存在，child.type.displayName 也可能是 undefined 或 null。

解决方法

1. 检查 child 是否定义：
2. 检查 child 是否定义：
3. 使用可选链操作符（Optional Chaining）：
4. 使用可选链操作符（Optional Chaining）：
5. 可选链操作符 ?. 可以在访问属性时避免抛出错误，如果属性不存在，它会返回 undefined 而不是抛出错误。
6. 调试信息： 在调试时，可以打印出 child 和 child.type 的值，以便更好地理解问题所在。
7. 调试信息： 在调试时，可以打印出 child 和 child.type 的值，以便更好地理解问题所在。

示例代码

假设你有一个函数 processChild，它尝试访问 child.type.displayName：

function processChild(child) {
    if (child && child.type && child.type.displayName) {
        console.log(child.type.displayName);
    } else {
        console.log('child 或 child.type 或 child.type.displayName 未定义');
    }
}

// 示例调用
const child = { type: { displayName: 'Example' } };
processChild(child); // 输出: Example

const childUndefined = undefined;
processChild(childUndefined); // 输出: child 或 child.type 或 child.type.displayName 未定义

参考链接

• MDN Web Docs: Optional Chaining

通过以上方法，你可以有效地避免和处理 TypeError: 未定义不是对象 错误。