在 React 中将多个值和 setter 对传递给 Context.Provider

Question

到目前为止，我设法找到的所有文档和博客文章都只涉及一个 [value, setValue] 对场景。在我的情况下，我希望/需要使用 useContext 钩子将多对 [value, setValue] 变量传递给提供者。

这是我在 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 或解决我的问题的任何想法，将不胜感激

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，可能会在不久的将来发生变化。

Answer 2

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

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

要在功能组件中解决此问题，您可以使用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>
    );
}