如何使用 react-hooks 更改像 redux 这样的变量的值？答案

【问题标题】：How to change value of variable like redux but with react-hooks?如何使用 react-hooks 更改像 redux 这样的变量的值？
【发布时间】：2019-11-26 13:22:52
【问题描述】：

也许我的问题不匹配。如何使用另一个组件更改变量的值？我想使用 react-hooks 来改变像 redux 这样的值。例如，我有变量 const [message, setMessage] = useState(''); ，该位置在 SearchScreen.jsfile 中。我想在Test.js 文件中更改这个变量的值。

//SearchScreen file
import 'react-native-gesture-handler'
import React,{ useState } from 'react';
import {View, Text, Button} from 'react-native';
const SearchScreen = ({navigation}) =>{
    const [message, setMessage] = useState('');
    return(
            <View>
                <Text>{message}</Text>
                <Button
                    title='enter to next bar'
                    onPress={() => navigation.navigate('Test')}
                />
            </View>
        );
};

export default SearchScreen;

还有另一个文件

//Test file
import React,{useState} from 'react';
import {View, Text} from 'react-native';
const Test = () =>{
    return(
        <View>
            <Text>
            </Text>
        </View>
    );
};

export default Test;

我可以立即在Test.js 文件中写入setMessage('Testing')

【问题讨论】：

你在哪里使用Test组件？
@IanVasco 组件意味着另一个屏幕。但是测试不是组件。当我按下按钮时。我的屏幕转到测试组件。
请显示Test 的完整用法以便帮助您。有很多选择
这是整个测试文件。我想更改Test.js 文件中message 变量的值。如果您的意思是您的屏幕如何进入测试屏幕。根文件没有错误App.js。
@IanVasco 我可以像 redux 一样使用 react-hooks：将值更改为全局吗？

标签： javascript reactjs react-native react-hooks

【解决方案1】：

通过导航为 setMessage 值消息发送回调

import React,{ useState } from 'react';
import {View, Text, Button} from 'react-native';
const SearchScreen = ({navigation}) =>{
    const [message, setMessage] = useState('');
    return(
            <View>
                <Text>{message}</Text>
                <Button
                    title='enter to next bar'
                    onPress={() => navigation.navigate('Test',{setMessage})}
                />
            </View>
        );
};

export default SearchScreen;

然后从导航道具中获取此回调，例如在您的测试路线中

测试文件

import React,{useState} from 'react';
import {View, Text} from 'react-native';
const Test = (props) =>{
const {navigation} = props;
const setMessage = navigation.state.params.setMessage;
    return(
        <View>
            <Text>
            </Text>
        </View>
    );
};

export default Test;

文档检查send value to other screen

【讨论】：

对全局变量使用useState是否正确？
我的意思是像 redux 一样改变值，但是通过 react-hooks
如果你用的太多，那么不推荐这样使用。而是使用 react context api 或 redux。
我可以使用像 redux 这样的 react-hooks。改变变量的值。不放道具？