如何使用useContext钩子共享stateSetter函数？

Question

我在组件层次结构中有以下代码：

import VisibilityContext from '../visibilityContext';

...

const [showEditModal, setEditModalVisibility] = useState(false);

...

<VisibilityContext.Provider value={{setEditModalVisibility}}>
   <EditModal/>
</VisibilityContext.Provider>

在EditModal中我有这段代码：

import VisibilityContext from '../visibilityContext';

...

const {setEditModalVisibility} = useContext(VisibilityContext);

但是当我在setEditModalVisibility组件中控制它时，函数EditModal是空的。如果我通过showEditModal而不是setEditModalVisibility，useContext给了我正确的价值。我甚至尝试使用另一个setEditModalVisibility将useState放入该状态，并将其传递下来，以防useContext需要将引用存储在某个州。

我只想让树下的组件能够调用setEditModalVisibility函数。而且我希望能够分享这个功能，而不必将它作为道具传递给树。

Answer 1

以下是使用Context有效管理状态的示例代码。

    import React, { createContext, useState, useContext } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const VisibilityContext = createContext();

const Provider = props => {
  const [visible, setVisible] = useState(false);
  const value = { state: { visible }, actions: { setVisible } };
  return (
    <VisibilityContext.Provider value={value}>
      {props.children}
    </VisibilityContext.Provider>
  );
};

function App() {
  const { state, actions } = useContext(VisibilityContext);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => actions.setVisible(!state.visible)}>
        {state.visible ? "ON" : "OFF"}
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  rootElement
);