我正在嘗試使用掛鈎來管理Context.Provider的狀態

Question

我試圖在反應中使用鈎子和上下文來包裝數據共享組件。

我確實嘗試將useState應用於我創建的Provider的無狀態組件。 但事實是，由於此提供程序是無狀態的，因此無法在我在DOM中定義的兩個不同的提供程序組件之間共享數據。 因此，我計划將Provider更改為類組件，並在其外部使用鈎子。

這是我編寫的代碼的一部分，但是問題是我沒有在瀏覽器中顯示任何內容，我也不知道為什么。 我不確定我的用法在哪里錯誤。

function createCTX(defaultProps) {
  const CTX = React.createContext(defaultProps);

  const HookComponent = Component => {
    const testComponent = () => {
      const [newProps, setData] = useState(defaultProps);
      return <Component newProps={newProps} setData={setData} />;
    };
    return testComponent;
  };

  class Provider extend React.Component {
    constructor(props) {
      super(props);
      const {
        newProps,
        setData
      } = props;
      this.state = {
        Props: newProps,
        setData
      }
    }
    render() {
      return <CTX.Provider value={this.state}>{this.props.children} 
      </CTX.Provider>;
    }
  }

  class Consumer extends React.Component {
    render() {
      return (
        ...
      );
    }
  }

  const ProviderComponent = HookComponent(Provider);

  return { ProviderComponent, Consumer };
}

沒有錯誤信息。 即使我只是更改為不使用useState的值，我仍然什么也沒有顯示。 這是否意味着不能以這種方式使用Context.Provider？

Answer 1

您可以在Provider外部提取useState，然后在Context Provider的父級中使用useState。

另外，您應該使用useContext掛鈎而不是Consumer。

像這樣：

...
const Context = React.createContext()
...
const App = () => {
  const [state, setState] = useState("Some Text")

  const changeText = () => {
    setState("Some Other Text")
  }
...

  <h1> Basic Hook useContext</h1>
     <Context.Provider value={{changeTextProp: changeText,
                               stateProp: state
                                 }} >
        <TestHookContext />
     </Context.Provider>
)}

然后是子組件

import React, { useContext } from 'react';

import Context from '../store/context';

const TestHookContext = () => {
  const context = useContext(Context)

  return (
    <div>
    <button onClick={context.changeTextProp}>
        Change Text
    </button>
      <p>{context.stateProp}</p>
    </div>
  )
}


export default TestHookContext;

因此，最主要的不是在提供者內部使用狀態，而是從父級使用狀態，然后將其傳遞給提供者。 還要確保將子組件也與提供程序一起包裝。