Question

我正在尝试在我的本机应用程序中使用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>

Answer 1

这是因为您没有在应用程序中的任何地方使用UPDATE组件。尝试这样：

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组件，并通过一个带有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;

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

1 个答案: