在离子反应中的两个选项卡之间共享数据

问题描述

我有 App.tsx，它是应用程序根目录，然后是两个选项卡 tab1.tsx 和 tab2.tsx。

tab1.tsx 有一个变量声明为

  const [coins,setCoins] = useState(0)

和 tab2.tsx 我也声明相同

  const [coins,setCoins] = useState(0)

但这只是目前的一种解决方法。我如何让它在一个地方声明它能够在两个选项卡之间共享它。我不认为将它作为参数在选项卡之间传递是一个好的解决方案。

在 ionic angular 中，我使用了一项服务来处理此类变量，然后在整个应用程序中轻松引用。离子反应的解决方案是什么？

解决方法

使用 useContext React Hook。 https://reactjs.org/docs/hooks-reference.html#usecontext

1- 在项目中新建一个文件，比如 my-context.tsx

import React,{ createContext,useState } from "react";

//create the context
export const MyContext = createContext<any>(undefined);

export const MyProvider: React.FC = ({ children }) => {

  const [coins,setCoins] = useState(0)
  
  let state = {
coins,setCoins
    
  };

  //wrap the application in the provider
  return <MyContext.Provider value={state}>{children}</MyContext.Provider>;
};

export default MyContext;

2- 像这样将 App.tsx 包裹在 <AuthProvider> </AuthProvider> 中：

const App: React.FC = () => {

  return (
    <IonApp>
      <AuthProvider>
        <IonReactRouter>
          ...
        </IonReactRouter>
      </AuthProvider>
    </IonApp>
  );
};

export default App;

3- 每次您想在其他组件/页面中使用此状态时，请导入上下文并像这样使用它：

  const {
    coins,setCoins
  } = React.useContext(MyContext);

通过这种方式，您可以在整个应用中共享状态并设置状态。