如何使用在useEffect钩子中定义的onPress(单击)调用函数

Question

>我有注销屏幕，其中定义了注销按钮，通过按注销按钮，我正在删除令牌并想重定向到登录屏幕，当我按下它删除令牌但不重定向到登录时，当我关闭或重新打开或刷新后它会重定向。 为了克服这个问题，我正在使用useEffect hook进行 compnentDidUpdate 或类似的东西。

useEffect(() => {
const handleLogout = () => {
// dispatch(logoutAction());
};
handleLogout();
}, [handleLogout]);

但是当我在 onPress 上调用 handleLogout 时，错误发生变量 handleLogout 未定义，因为作用域不能在其作用域之外使用变量。

<TouchableNativeFeedback onPress={handleLogout}>
<View style={styles.logoutBtn}>
<Text style={{color: '#FFFFFF'}}>Logout</Text>
</View>
</TouchableNativeFeedback>

Answer 1

只需在useeffect之外定义此函数，并且仅在useEffect中引用它并调用它。

...
const handleLogout = () => {
// dispatch(logoutAction());
};
useEffect(() => {
handleLogout();
}, [handleLogout]);
return (
<TouchableNativeFeedback onPress={handleLogout}>
<View style={styles.logoutBtn}>
<Text style={{color: '#FFFFFF'}}>Logout</Text>
</View>
</TouchableNativeFeedback>
)
...

但我不确定这是否是"好"的做法，因为这可能会导致渲染上的 useEffect 触发器，因为您正在传递函数作为依赖项。所以在我看来，它从一开始就看起来很奇怪。我会做什么，一起抛弃useEffect，也许尝试在调度中添加一些额外的功能。类似的东西

...
const navigation = useNavigation()
const handleLogout = () => {
dispatch(logoutAction());
navigation.navigate('YourInitialScreen')
};
return (
<TouchableNativeFeedback onPress={handleLogout}>
<View style={styles.logoutBtn}>
<Text style={{color: '#FFFFFF'}}>Logout</Text>
</View>
</TouchableNativeFeedback>
)
...

很难理解你到底想做什么，不知道这个dispatch到底做了什么。但也许这有助于你的头脑风暴。

Answer 2

将函数定义移出useEffect：

const handleLogout = () => {
// dispatch(logoutAction());
};
useEffect(() => {
handleLogout();
}, [handleLogout]);