Question

我在本地反应中使用了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

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

您确实如此：

export const LoginConsumer = MyContext.Consumer;

然后您在useContext上致电LoginConsumer：

let loginConsumer = useContext(LoginConsumer);

相反，您应该在useContext上致电MyContext，如下所示：

从CommonContext.js导出上下文：

export const MyContext = createContext();

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

import { MyContext } from './CommonContext';

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

Answer 2

更改此代码后，警告将从控制台中删除

更改此

let loginConsumer = useContext(LoginConsumer);

对此

let loginConsumer = ()=> useContext(LoginConsumer);

我不知道为什么会这样，但是它从控制台中删除了警告

此答案有助于从控制台中删除警告

https://github.com/reactjs/rfcs/issues/72#issuecomment-437891201

useContext（Context）在React Native的控制台上显示警告

2 个答案: