更新的 React Context 值未反映在上一个屏幕中

Question

我已经通过从 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 中获取更新的值？

Answer 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 Context 值未反映在上一个屏幕中

React Context value updated is not reflecting in previous screen

reactjs

react-native

react-context

use-context