如何更新组件之间的反应上下文？

Posted 2023-04-14

【中文标题】如何更新组件之间的反应上下文？

【英文标题】：How to update react context between components?

【发布时间】：2021-01-26 05:06:40

【问题描述】：

我有两个兄弟组件（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);

是否可以以这种方式更新上下文，还是应该采取其他方法？

【参考方案1】：

您在控制台日志中看到的是在更新模型对象之后。它不再指上下文。在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);
   

您必须这样做，因为如果您不使用上下文提供程序包装它们的父级，则上下文不会自动到达兄弟级。 This 博客可能有助于您了解上下文的用法