useContext(Context) 在 React Native 的控制台上显示警告

Question

我在 react native 中使用了React Context API钩子。我创建了Consumer和Provider，以便将道具和状态从父级传递到子级。代码运行良好，我已经收到了从父母到孩子的道具。

我在控制台上收到以下警告：-

警告：不支持调用useContext(Context.Consumer(，可能会 导致错误，并将在未来的主要版本中删除。你 意思是调用useContext(Context(代替？

请检查下面添加的代码：-

我已经创建了通用上下文文件CommonContext.js。

import React, {createContext} from 'react';
const MyContext = createContext();
export const LoginProvider = MyContext.Provider;
export const LoginConsumer = MyContext.Consumer;

这是我的提供程序代码

import React, {PureComponent} from 'react';
import {View, Text} from 'react-native';
import {LoginProvider} from './CommonContext';
export default class Login extends PureComponent {
constructor(props) {
super(props);
}
render() {
return (
<View style={Styles.mainContainer}>       
<LoginProvider value={this.props}>
<LoginScreenView />
</LoginProvider>
</View>
);
}
}

通过这种方式，我将父组件数据访问到子钩子中

import {LoginConsumer} from './CommonContext';
export default function LoginScreenView(props) {
let loginConsumer = useContext(LoginConsumer);
return (
<View style={Styles.mainContainer}>
<Text>{loginConsumer}</Text>
</View>
);
}

Answer 1

您收到此错误是因为您在Context.Consumer实例上调用useContext，而不是在Context上调用。

你这样做是这样的：

export const LoginConsumer = MyContext.Consumer;

然后你打电话给useContextLoginConsumer：

let loginConsumer = useContext(LoginConsumer);

相反，您应该在MyContext上调用useContext，如下所示：

1. 从CommonContext.js导出上下文：

export const MyContext = createContext();

2. 导入上下文，而不是正在使用它的文件中的上下文使用者：

import { MyContext } from './CommonContext';

3. 然后与useContext一起使用：

let login = useContext(MyContext);

因此，您发布的第二个组件将如下所示：

import { MyContext } from './CommonContext';
export default function LoginScreenView(props) {
let login = useContext(MyContext);
return (
<View style={Styles.mainContainer}>
<Text>{login}</Text>
</View>
);
}