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;

然后您在LoginConsumer 上致电useContext：

let loginConsumer = useContext(LoginConsumer);

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

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

export const MyContext = createContext();

1. 在您使用它的文件中导入上下文而不是上下文使用者：

import { MyContext } from './CommonContext';

1. 然后与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>
  );
}