React 16.3 Context API - 提供者/消費者問題

Question

我一直在做React 16.3.1 ContextAPI的實驗。 我遇到了一些我無法理解的東西。 我希望我可以使用你的幫助。

注意：問題已經解決了，但它不是我想要的解決方案。

讓我們從同一文件Index.js中的多個組件開始第一次實驗。

import React, { Component, createContext } from 'react';
const { Provider, Consumer } = createContext();

class AppProvider extends Component {
  state = {
    name: 'Superman',
    age: 100
  };

  render() {
    const increaseAge = () => {
      this.setState({ age: this.state.age + 1 });
    };

    const decreaseAge = () => {
      this.setState({ age: this.state.age - 1 });
    };
    return (
      <Provider
        value={{
          state: this.state,
          increaseAge,
          decreaseAge
        }}
      >
        {this.props.children}
      </Provider>
    );
  }
}

class Person extends Component {
  render() {
    return (
      <div className="person">
        <Consumer>
          {context => (
            <div>
              <p>I'm {context.state.name}</p>
              <p>I'm {context.state.age}</p>
              <button onClick={context.increaseAge}>
                <span>+</span>
              </button>
              <button onClick={context.decreaseAge}>
                <span>-</span>
              </button>
            </div>
          )}
        </Consumer>
      </div>
    );
  }
}

class App extends Component {
  render() {
      return (
        <AppProvider>
          <div className="App">
            <p>Imma Apps</p>
            <Person />
          </div>
        </AppProvider>
      );
    }
  }

export default App;

結果，這完美呈現完美而沒有任何錯誤。 我能看到名字（ 超人 ）和年齡（ 100 ）。 我可以將年齡增加和減少1。

如您所見，我已從react創建了{Provider, Consumer} {createContext} ，然后創建了{Provider, Consumer} 。 使用狀態值和<Consumer>包裝<Provider> <Consumer> 。

下一個實驗，精確復制index.js中的每個組件，並將它們分別粘貼到自己的文件中。

AppProvider.js

import React, { Component, createContext } from 'react';
const { Provider, Consumer } = createContext();

class AppProvider extends Component {
  state = {
    name: 'Superman',
    age: 100
  };

  render() {
    const increaseAge = () => {
      this.setState({ age: this.state.age + 1 });
    };

    const decreaseAge = () => {
      this.setState({ age: this.state.age - 1 });
    };
    return (
      <Provider
        value={{
          state: this.state,
          increaseAge,
          decreaseAge
        }}
      >
        {this.props.children}
      </Provider>
    );
  }
}
export default AppProvider;

Person.js

import React, { Component, createContext } from 'react';
const { Provider, Consumer } = createContext();

class Person extends Component {
  render() {
    return (
      <div className="person">
        <Consumer>
          {context => (
            <div>
              <p>I'm {context.state.name}</p>
              <p>I'm {context.state.age}</p>
              <button onClick={context.increaseAge}>
                <span>+</span>
              </button>
              <button onClick={context.decreaseAge}>
                <span>-</span>
              </button>
            </div>
          )}
        </Consumer>
      </div>
    );
  }
}
export default Person;

App.js

import React, { Component, createContext } from 'react';
const { Provider, Consumer } = createContext();

class App extends Component {
  render() {
      return (
        <AppProvider>
          <div className="App">
            <p>Imma Apps</p>
            <Person />
          </div>
        </AppProvider>
      );
    }
  }

export default App;

結果，我收到錯誤 - TypeError：無法讀取undefined的屬性'state' 。

我無法理解確切的錯誤是什么。我所做的只是復制並粘貼到文件中而不改變任何語法。

雖然，替代方法是創建一個新文件並添加以下語法...

Context.js

import { createContext } from 'react';
const Context = createContext();
export default Context;

然后進入每個文件（AppProvider.js。Person.js和App.js）和替換...

import React, { Component, createContext } from 'react';
const { Provider, Consumer } = createContext(); “

... INTO ...

import Context from './Context.js'; 。 同時將<Provider>替換為<Context.Provider> ，將<Consumer>替換為<Context.Consumer> 。

這就消除了這個錯誤。 但是，這不是我要找的解決方案。 我想使用<Provider>標簽而不是<Context.Provider> 。

問題是，為什么我收到此錯誤？

為什么我無法使用這種方法......

import React, { Component, createContext } from 'react';
const { Provider, Consumer } = createContext(); “

對於單獨文件中的每個組件，我可以使用<Provider>標簽？

有什么方法可以獲得我正在尋找的解決方案嗎？

感謝您的幫助，並提前致謝。

Answer 1

你得到TypeError：無法讀取未定義的屬性'state'。 每次調用const { Provider, Consumer } = createContext();都要忘記const { Provider, Consumer } = createContext(); 它創建一個新對象，需要導出此對象以便消費者使用此特定對象。

所以在person.js中，當你嘗試做{context.state.age}它確實沒有關於這個對象的狀態，你剛剛創建了一個新的Context，它是空的，或者更確切地說是React的內部方法和屬性。

因此，為了使用相同的對象，只需導出它，就像在Context.js中那樣，而不是執行：

import { createContext } from 'react';
const Context = createContext();
export default Context;

替換為：

import { createContext } from 'react';
const { Provider, Consumer } = createContext();
export { Consumer, Provider };

然后當你想在其他文件中使用它（意味着導入它）時，只需調用：

import { Consumer, Provider } from './Context.js';