在 React / React Native 中不是父/子的类之间共享和更新变量

Posted 2023-04-14

【中文标题】在 React / React Native 中不是父/子的类之间共享和更新变量

【英文标题】：Sharing and updating a variable between classes in React / React Native that aren't parent/child

【发布时间】：2020-10-15 11:30:37

【问题描述】：

我有一个变量，我想在两个类之间跟踪并更新它的值。在我的一个课程中，我开始在我的 Post 类中使用带有变量 isLoading 的道具：

class Post extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            isLoading: false
        ;
    
    post = () => 
        this.props.uploadPost()
        this.props.updatePhoto()
        this.props.updateDescription('')
        this.props.navigation.navigate('Home')
    
    openLibrary = async () => 
        const  status  = await Permissions.askAsync(Permissions.CAMERA_ROLL)
        if (status === 'granted') 
            const image = await ImagePicker.launchImageLibraryAsync()
            if(!image.cancelled )
                this.setState( isLoading: true );

                const resize = await ImageManipulator.manipulateAsync(image.uri, [],  format: 'jpeg', compress: 0.1 )
                const url = await this.props.uploadPhoto(resize.uri) 
                this.props.updatePhoto(url)
                this.setState( isLoading: false );
            
        
    
...

现在，我还有另一个名为 Camera 的类，我想更新这个相同的变量。但是，我没有实现一个类似孩子的函数，我在其中调用 Post 或 Camera 类。 这是我的相机代码。

class CameraUpload extends React.Component     
    state = 
        type: Camera.Constants.Type.back,
    ;
    
    snapPhoto = async () => 
        const  status  = await Camera.requestPermissionsAsync();
        if (status === 'granted') 
            const image = await this.camera.takePictureAsync()
            global.config.loading = true;
            image ? this.props.navigation.navigate('Post') : null
            if( !image.cancelled )
                const resize = await ImageManipulator.manipulateAsync(image.uri, [],  format: 'jpeg', compress: 0.1 )
                const url = await this.props.uploadPhoto(resize.uri)
                this.props.updatePhoto(url)
                loading = false;
                // url ? this.props.navigation.navigate('Post') : null 
            
        
    

我尝试使用全局配置变量，但变量的值没有在类之间更新。请让我知道解决此问题的最佳方法是什么。谢谢！

【参考方案1】：

反应上下文

您可以在反应中使用“上下文”的概念。你可以在这里阅读它

https://reactjs.org/docs/context.html

异步存储

如果适合您的设计，您也可以使用异步存储

您可以创建一个实用程序类：

import AsyncStorage from '@react-native-community/async-storage';

export async function storeData(key, value) 
    try 
        await AsyncStorage.setItem(key, value)
     catch (e) 
        console.log("Error Storing in AsyncStorage stroing " + key + " in async Storage")
    


export async function getData(key) 
    try 
        const value = await AsyncStorage.getItem(key)
        return (value == null || value == undefined) ? undefined : value
     catch (e) 
        console.log("Error Reading in AsyncStorage stroing " + key + " in async Storage")
    

您可以通过键值对存储和获取数据。

// Firstly import it in your js

import * as asyncStorage from './AsyncStorage'

//For storingthe data:

 await asyncStorage.storeData("key1", "value1");

// For getting the data:

 await asyncStorage.getData("key1")

【讨论】：

假设我创建了一个名为 let loading = React.createContext(false); 的上下文变量。在我的课后。我尝试通过在函数中设置 loading = true 来更新相机类中的变量，但值没有改变。我使用正确吗？

不，你不能这样。您可以从这里获得更新上下文的想法。 ***.com/a/50502829/10720296

我已经编辑了我的答案并展示了另一种方法，您可以使用异步存储来存储和获取数据

【参考方案2】：

你可以试试全局变量：

class post 

   onpost()
      global.isLoading = true;
  



class cameraupload 
   componentDidMount()
      global.isLoading = false;
   

【参考方案3】：

在我看来，上下文是小块共享状态的方法。

结合钩子，很容易从任何子组件访问状态和调用函数。

使用任何共享状态和功能定义您的提供者

import React,  createContext, useState  from 'react'

const Context = createContext()

const MySharedStateProvider = ( children ) => 
  const [myState, setMyState] = useState('hello')

  const updateMyState = value => setMyState(value)

  return (
    <Context.Provider value= myState, updateMyState >
      children
    </Context.Provider>
  )


export  MySharedStateProvider, Context as MySharedStateContext 

为您的Context 创建一个钩子，可以在任何子组件中使用

import  useContext  from 'react'
import  MySharedStateContext  from './MySharedStateProvider.js'

export const useMySharedState = () => useContext(MySharedStateContext)

用提供者包装你的组件（我知道它不会像这样，这只是一个例子）

<MySharedStateProvider>
  <Posts/>
  <CameraUpload/>
</MySharedStateProvider>

现在在您的 Post 或 CameraUpload 组件中，您可以使用钩子获取值

import  useMySharedState  from './MySharedStateHook.js'

const Post = () => 
  const  myState, setMyState  = useMySharedState()