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

【问题标题】：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);

}

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

【问题讨论】：

标签： reactjs use-effect react-context

【解决方案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 博客可能有助于您了解上下文的用法

【讨论】：