将多个值和设置器对传递给 React 中的 Context.Provider

Question

到目前为止，我设法找到的所有文档和博客文章都只涉及单个 [value, setValue] 对场景。就我而言，我希望/需要使用 useContext 挂钩将多对 [value, setValue] 变量传递给 Provider。

这是我在 CodePen 中设置的典型示例： https://codepen.io/nardove/pen/XWrZRoE ?editors=0011

 const App = () => {
    return(
        <div>
            <MyProvider>
                <ComponentA />
            </MyProvider>
        </div>
    );
}

const MyContext = React.createContext();
const MyProvider = (props) => {
    const [value, setValue] = React.useState("foo");
    return(
        <MyContext.Provider value={[value, setValue]}>
            {props.children}
        </MyContext.Provider>
    );
}

const ComponentA = () => {
const [value, setValue] = React.useContext(MyContext);
    return(
        <div>
            <h1>
                The value is: {value}
            </h1>
        </div>
    );
}

ReactDOM.render(<App /> , document.getElementById('app'));

如果您可以就如何将多个 [value, setValue] 对传递给 Provider 或我的问题的替代方案分享任何想法，我们将不胜感激

原文由 Ricardo Sanchez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Context.Provider 接受任何值，所以你可以尝试传递一个对象：

 <MyContext.Provider
  value={{ value: [value, setValue], value2: [value2, setValue2] }}
>
  {props.children}
</MyContext.Provider>;

 const App = () => {
  return (
    <MyProvider>
      <ComponentA />
    </MyProvider>
  );
};

const MyContext = React.createContext();

const MyProvider = props => {
  const [value, setValue] = React.useState("foo");
  const [value2, setValue2] = React.useState("goo");

  return (
    <MyContext.Provider
      value={{ value: [value, setValue], value2: [value2, setValue2] }}
    >
      {props.children}
    </MyContext.Provider>
  );
};

const ComponentA = () => {
  const { value, value2 } = React.useContext(MyContext);
  const [stateValue, setStateValue] = value;
  const [stateValue2, setStateValue2] = value2;

  return (
    <div>
      <h1>The value is: {stateValue}</h1>
      <h1>The value2 is: {stateValue2}</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

---

请注意，在尝试优化无用渲染时有一个警告（确保您不只是 过早优化）： 没有针对 Context Consumers 的渲染救助。

至于 v17，可能会在不久的将来发生变化。

原文由 Dennis Vash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要将多个状态值传递给提供者，您只需要创建另一个状态对象并将其传递进来。

但是内联这些带有文档中提到的 警告。由于 render 中的对象（和数组）是在每次渲染时创建的，因此它们失去了引用相等性，因此连接到此上下文的任何组件都需要刷新。

要在功能组件中解决此问题，您可以使用 useMemo 来记忆值并仅在其中一个值更改时刷新。

 const MyContext = React.createContext();
const MyProvider = (props) => {
    const [valueA, setValueA] = React.useState("foo");
    const [valueB, setValueB] = React.useState("bar");
    const providerValue = React.useMemo(() => ({
        valueA, setValueA,
        valueB, setValueB,
    }), [valueA, valueB]);
    return(
        <MyContext.Provider value={providerValue}>
            {props.children}
        </MyContext.Provider>
    );
}

原文由 Agney 发布，翻译遵循 CC BY-SA 4.0 许可协议