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

Question

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

}

是否可以用这种方式更新上下文，或者我应该采用其他方法吗？

Answer 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 博客可能有助于您了解 context

的用法

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

How to update react context between components?

reactjs

react-context

use-effect