反应全局变量中的本机更新状态变化答案

【问题标题】：React native update state change in global variable反应全局变量中的本机更新状态变化
【发布时间】：2019-11-05 16:42:39
【问题描述】：

我创建了 1 个包含 1 个按钮和 1 个文本的组件。我创建了一个名为 global.js 的 js 文件，它存储了 device_type。现在，当我按下按钮时，我调用了一个在不同文件上创建的函数。此函数将全局变量 device_type 更新为 Android 或 IOS。当全局变量发生变化时，它应该反映在我的组件屏幕中并更新文本字段。我怎样才能实现它？

让我详细解释一下。首先我创建了组件

import React, { useState } from 'react'
import { View, Text, StyleSheet, TextInput, Button, Keyboard } from 'react-native'
import checkDevice from './CheckDevice'
import globals from './globals'

//Componet screen which will display on device
const checkDeviceType = () =>{
    const [deviceType,setDeviceType] = useState(globals.devive_type)

useEffect ( ()=>{
}[deviceType])
    return(
        <View>
<Button title = 'Save Post' onPress = {()=> checkDevice.checkType()}/>
<Text> {dviceType} </Text>
</View>
    )
}

const styles = StyleSheet.create({

})

export default EditScreen

//Function to check deviceType create in separate file
import globals from './globals'
const checkDevice = {
checkType = () =>{
  call method to get device type
  globals.devive_type = 'Android' 
}

现在当我点击按钮文本时

现在我使用回调函数。但我认为这不是正确的方式

【问题讨论】：

deepak ，通过使用回调函数可以正常工作吗？回调函数没有害处。
是的，但是onClick我调用了另一个函数的函数。所以我必须将回调参数调用传递给每个调用函数
是的，有什么问题吗？这就是 react 建议传递回调函数的方式
有趣的想法，但我从问题中了解到，问题是你并没有真正让组件重新渲染。它确实使用按钮单击更改了全局变量。但是要查看效果，您需要重新渲染组件。如果您想在不使用庞大库的情况下保持全局状态，请查看 https://github.com/andregardi/use-global-hook 只需几行代码，只需响应 16 个 useState 和 useEffect 即可。
@SubhenduKundu 你是对的。由于全局变量在其他文件中声明，因此组件不会重新渲染。根据代码，我们无法知道 device_type 变量已更改，我们需要调用 setDeviceType 函数。

标签： reactjs react-native

【解决方案1】：

如果在组件的任何父组件（包含按钮和文本字段）中定义了全局变量，您应该能够在组件中将其作为道具访问。

您能否像这样分享您的代码，这非常令人困惑。如果您有任何疑问，请写信给我。希望这会有所帮助。谢谢

【讨论】：