在 React 中將多個值和設置器對傳遞給 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>
    );
}

Answer 3

您可以發送如下所示的值。 我已經發送了 demo1、setdemo1、demo2 和 setdemo2。 在 exportValues.provider 里面的 {{}} 里面它對我有用

import {View, Text} from 'react-native';
import React, {createContext, useState} from 'react';

export const exportValues = createContext();

const ContextTab = ({children}) => {
  const [demo1, setdemo1] = useState([]);
  const [demo2, setdemo2] = useState([]);
  return (
    <exportValues.Provider
      value={{demo1, setdemo1,demo2, setdemo2}}>
      {children}
    </exportValues.Provider>
  );
};

export default ContextTab;