[英]Passing multiple value and setter pairs to Context.Provider in React
到目前为止,我设法找到的所有文档和博客文章都只涉及单个 [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 或我的问题的替代方法分享任何想法,将不胜感激
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,可能会在不久的将来发生变化。
要将多个状态值传递给提供者,您只需要创建另一个状态对象并将其传入。
但是内联这些伴随着文档中提到的警告。 由于渲染中的对象(和数组)是在每次渲染时创建的,因此它们失去了引用相等性,因此连接到此上下文的任何组件都需要刷新。
要在功能组件中解决此问题,您可以使用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>
);
}
您可以发送如下所示的值。 我已经发送了 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.