Question

这是我的App.js，我正在使用上下文api，但无法获取 {context.country}和{context.job}中的数据位于子项中组件，即邻居。这是我的App.js，我正在使用上下文api，但无法获取 {context.country}和{context.job}中的数据位于子项中组件，即邻居。 App.js

    import React, { Component } from 'react';
    import Neighbour from './Neighbour';

    const MyContext = React.createContext();

    class MyProvider extends Component {
      state = {
        firstName: 'Tom', lastName: 'Holland', age: 24, country: 'America', job: 'Actor',
      }
      render() {
        return (
          <MyContext.Provider value={{
            state: this.state, growOld: () => this.setState({ age: this.state.age + 1 })
          }}>
            {this.props.children}
          </MyContext.Provider>
        );
      }
    }


    class App extends Component {
      render() {
        return (
          <div className="App">
            <MyProvider value={{ state: this.state }}>
              <div>
                <p>I am in App component</p>
                <Family />
                <br />
                <Neighbour />
              </div>
            </MyProvider>
          </div>
        );
      }
    }

    export default App;

Neighbour.js

import React, { Component } from 'react';
const MyContext = React.createContext();

class Neighbour extends Component {
    constructor(props){
        super(props)

    }
    render() {
        return (
            <div>
                <MyContext.Consumer>
                    {context => (
                        <React.Fragment>
                            <p>Country : {context.country}</p>
                            <p>Job : {context.job}</p>
                        </React.Fragment>
                    )}
                </MyContext.Consumer>
            </div>
        );
    }
}

export default Neighbour;

Answer 1

由于您要提供值作为对象{state: this.state}的上下文，因此您需要在使用者中像context.state.country那样使用它。

<MyContext.Consumer>
                {context => (
                    <React.Fragment>
                        <p>Country : {context.state.country}</p>
                        <p>Job : {context.state.job}</p>
                    </React.Fragment>
                )}
            </MyContext.Consumer>

或者您在提供程序中提供值，例如

 <MyProvider value={this.state}>
          <div>
            <p>I am in App component</p>
            <Family />
            <br />
            <Neighbour />
          </div>
  </MyProvider>

此外，在Neighbour组件中，您将再次创建一个没有Provider的上下文，因此Consumer中的值将变为未定义，您需要导入使用了相同的上下文{p}上的Provider

在Neighbour.js

Neighbour.js

import React, { Component } from 'react';
inport { MyContext } from 'path/to/context';

使用React Context API时，无法获取数据

1 个答案: