时间戳

首页 > 解决方案 > useContext(Context) 在 React Native 的控制台上显示警告

reactjs - useContext(Context) 在 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>
 );
}

标签： reactjsreact-nativereact-hooksreact-context

解决方案

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

你这样做：

export const LoginConsumer = MyContext.Consumer;

然后你useContext打电话LoginConsumer：

let loginConsumer = useContext(LoginConsumer);

相反，您应该调用useContexton MyContext，如下所示：

  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>
  );
}

推荐阅读