繁体   English   中英

无法在react-native上下文api中读取未定义的属性“状态”?

[英]Cannot read property 'state' of undefined in react-native context api?

我正在尝试在我的应用程序中使用上下文API。 但我收到此错误。 TypeError:TypeError:无法读取未定义的属性“ number”。 我的代码有什么问题?

appContext.js

import React from 'react';

export const AppContext = React.createContext();

class AppProvider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 10,
        };
    }

    render() {
        return 
        (
            <AppContext.Provider value={this.state}>
                {this.props.children}
            </AppContext.Provider>
        )
    }
}

export default AppProvider;

homeScreen.js

import { AppContext } from './appContext';
<AppContext.Consumer>
    {(context) => context.number}
</AppContext.Consumer>

这是因为您没有在App的任何地方使用AppProvider组件。 尝试这样:

const AppContext = React.createContext();

class AppProvider extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      number: 10,
    };
  }

  render() {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <AppProvider>
        <AppContext.Consumer>
          {context => context.number}
        </AppContext.Consumer>
      </AppProvider>
    );
  }
}

AppProvider在这里仅仅是一个标准组件。 它呈现了上下文的Provider并且Provider一些孩子。 因此,您应该在应用程序中的某个位置使用此AppProvider组件,并将带有Consumer的子对象传递给它。

如果要将上下文保存在单独的文件中,将如下所示:

上下文和提供者组件

import React from "react";

export const AppContext = React.createContext();

class AppProvider extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      number: 1745,
    };
  }

  render() {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

export default AppProvider;

主要成分

import React from "react";
import AppProvider, { AppContext } from "./AppProvider";

class App extends React.Component {
  render() {
    return (
      <AppProvider>
        <AppContext.Consumer>
          {context => context.number}
        </AppContext.Consumer>
      </AppProvider>
    );
  }
}

export default App;

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM