更新的反应上下文值未反映在上一个屏幕中

Posted 2023-04-14

【中文标题】更新的反应上下文值未反映在上一个屏幕中

【英文标题】：React Context value updated is not reflecting in previous screen

【发布时间】：2021-04-14 15:02:01

【问题描述】：

我已经通过 A -> B 的导航对原生应用做出反应。

//TestContext.js
export const TestContext = createContext('initial value');

//B.js
  const myVal,changeMyVal = useContext(TestContext);
return(
<View>
    <Button
            onPress=() => 
              changeMyVal('new value')
              console.log(myVal); // Prints 'new value'
            >
</View>
);

//A.js
  const myVal = useContext(TestContext);
return(
<View>
    <Button
            onPress=() => 
              console.log(myVal); // Prints 'initial value'
            >
</View>
);

当我从 B 回到 A 并打印上下文值时，我仍然得到 初始值。既然我从 B 回来时没有重新渲染，那么如何在 A 中获取更新的值？

【问题讨论】：

您好，欢迎来到 ***！请显示您使用<TestContext.Provider> 的组件。您点击edit 为您的问题添加详细信息。

【参考方案1】：

useContext 不会像 useState 挂钩那样返回更新程序函数。如果您想从消费者那里更新您的状态，只需从提供者那里提供一个更新器功能，例如，

const ContextShared = createContext( value: "", updater: () => null );
    ...
    const [value, updater] = useState("initialValue");
    ...
    <ContextShared.Provider value= value, updater >
        <Component1 />
        <Component2 />
      </ContextShared.Provider>


    function Component1() 
    const  value  = useContext(ContextShared);
    ...
    
    
    function Component2() 
        const  updater  = useContext(ContextShared);
        function handleClick() 
        updater("updated from page 2");
      
    
      return <div onClick=handleClick>Page 2 </div>;
    

Live working example

【讨论】：

由于我没有足够的React Native背景，我不能再帮你了:(.