React上下文。如何避免“未定义的属性无法读取”错误

React上下文（React Context）是React提供的一种跨组件传递数据的机制。它可以帮助我们在组件树中传递数据，而不需要通过逐层传递props的方式。

为了避免“未定义的属性无法读取”错误，可以采取以下几种方法：

1. 使用默认值：在使用上下文数据时，可以为上下文提供一个默认值，以防止在没有提供上下文数据的情况下出现错误。可以通过在创建上下文时使用React.createContext(defaultValue)来设置默认值。
2. 使用条件渲染：在使用上下文数据之前，可以先检查上下文数据是否存在，如果不存在则不渲染相关内容。可以使用条件渲染的方式，例如使用if语句或三元表达式来判断上下文数据是否存在。
3. 使用Optional Chaining运算符：Optional Chaining是ES2020引入的新特性，可以简化访问嵌套属性时的代码，并且在属性不存在时不会抛出错误。可以使用?.运算符来避免“未定义的属性无法读取”错误。例如，contextData?.property。
4. 使用PropTypes进行类型检查：可以使用PropTypes库对上下文数据进行类型检查，以确保传递的数据类型正确。通过在使用上下文数据的组件中定义contextTypes属性，可以指定上下文数据的类型要求。

总结起来，为了避免“未定义的属性无法读取”错误，可以使用默认值、条件渲染、Optional Chaining运算符和PropTypes进行类型检查等方法来处理上下文数据。这样可以确保在没有提供上下文数据或数据类型不匹配的情况下，不会出现错误。