reactjs - 如何更新组件之间的反应上下文?
问题描述
我有两个兄弟组件(A 和 B),我试图在它们之间传递反应上下文。不是静态上下文。上下文在组件 A 中创建和更新,如下所示:
export const ModelContext = React.createContext({ model: '' });
function Models() {
const [check, setCheck] = useState({});
const [alert, setAlert] = useState(false);
let model = useContext(ModelContext);
const handleChange = (event) => {
const arr = Object.keys(check);
if (arr.length === 1 && arr.includes(event.target.name) === false) {
setAlert(true);
} else if (arr.length === 1 && arr.includes(event.target.name) === true) {
setAlert(false);
setCheck({});
model = check;
console.log(model);
} else {
setCheck({ ...check, [event.target.name]: event.target.checked });
setAlert(false);
}
};
我在handleChange 中更新了这个组件中的上下文(ModelContext)。我可以从 console.log(model) 看到上下文正在按照我的意愿进行更新。
但是,在组件 B 中,上下文 (ModelContext) 并未更新。我不知道从这里去哪里。这是组件B:
import { ModelContext } from './index';
function Fields() {
const modelSelected = useContext(ModelContext);
}
是否可以以这种方式更新上下文,还是应该采取另一种方法?
解决方案
您在控制台日志中看到的是在更新模型对象之后。它不再指上下文。它现在有一个新的参考model=check
。
首先,如果您想在 2 个兄弟姐妹之间传递上下文,则应使用上下文提供程序将公共父级包裹起来。您可以创建上下文提供程序组件。
const ModelContext = useContext({model: ''});
const ContextProvider = ({children, modelData}) => {
const [model, setModel] = useState(modelData);
return <ModelContext.Provider value={{model, setModel}}>{children}</ModelContext.Provider>
}
const Parent = () => {
return (
<ContextProvider modelData={your model data}>
<Models />
<Fields/>
</ContextProvider>
)
}
const Models = () => {
const [check, setCheck] = useState({});
const [alert, setAlert] = useState(false);
const {model, setModel} = useContext(ModelContext);
const handleChange = (event) => {
const arr = Object.keys(check);
if (arr.length === 1 && arr.includes(event.target.name) === false) {
setAlert(true);
}
else if (arr.length === 1 && arr.includes(event.target.name)===true) {
setAlert(false);
setCheck({});
setModel(check);
console.log(model);
} else {
setCheck({ ...check, [event.target.name]: event.target.checked });
setAlert(false);
}
};
const Fields = () => {
const {model: modelSelected} = useContext(ModelContext);
console.log(modelSelected);
}
您必须这样做,因为如果您不使用上下文提供程序包装它们的父级,则上下文不会自动到达兄弟级。该 博客可能有助于您了解上下文的使用