React-Native， Redux， useSelector 生成错误"Invalid hook call"

Question

根据之前帖子中收到的帮助，我现在使用React Native功能组件和更新的Redux挂钩来获取和设置全局Redux状态变量。

我的问题出现在试图创建一个外部函数(文件"authentication.js"(时，该函数试图获取存储变量"的值；用户名"；使用"；useSelector"；Redux函数。

它从外部文件"；DetailsScreen.js"但在另一个外部文件"中失败；js"；，尽管在我未经训练的眼中，代码看起来是一样的，但有一些明显的细微差异。

此代码运行良好：

DetailsScreen.js

import React from 'react';
import type { Node } from 'react';
import { Text, View, Button } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
export const DetailsScreen = ({ route, navigation }) => {
const syncedDate = useSelector(state => state.projects.syncedDate);
console.log('DetailsScreen syncedDate: ', syncedDate);
const dispatch = useDispatch();
const changeDate = newDate => dispatch({type: "PJS_SET_SYNCEDDATE", payload: newDate});
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details</Text>
<Text>SyncedDate: {syncedDate}</Text>
<Button
title="SetDate"
onPress={() => changeDate("10/15/2021")}
/>
</View>
);
};
export default DetailsScreen;

但此代码生成一个错误："；无效的钩子调用">

authentication.js

import React from 'react';
import type { Node } from 'react';
import { useSelector } from 'react-redux';
export const authStage_getToken = () => {
const username = useSelector(state => state.authentication.username);
const password = 'testingEncoding';
// Encode the String
const credentials = base64.encode(username + ':' + password);
console.log('authStage_getToken encoded credentials:', credentials);
return credentials;
}
export default authStage_getToken;

启动此功能的其他文件：

登录屏幕.js

import React, {useState} from 'react';
import type { Node } from 'react';
import { StyleSheet, Text, TextInput, View, Button, TouchableOpacity } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { authStage_getToken } from '../processes/authentication';
export const LoginScreen = ({ route, navigation }) => {
const [username, setUsername] = useState(useSelector(state => state.authentication.username));
const dispatch = useDispatch();
const changeLogin = newLogin => dispatch({type: "AUTH_SET_LOGINAUTHENTICATION", payload: newLogin});
const onButtonPress = () => {
if (!username || username === '') {
setValidationError("Username cannot be blank.");
} else {
changeLogin({username:username,password:password});
}
console.log('Before triggering getToken...');
const result = authStage_getToken();
console.log('After triggering getToken, result: ', result);
}
return (
<View style={styles.container}>   
<View style={styles.inputRow}>
<TextInput
style={styles.input}
placeholder="Username"
placeholderTextColor="#808080"
autoFocus={true}
onChangeText={(text) => setUsername(text)}
value={username}
/>
</View>
<View style={styles.inputRow}>
<TouchableOpacity
style={styles.button}
onPress={() => onButtonPress()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
</View>
);
};
export default LoginScreen;
const styles = StyleSheet.create ({
container: {
...

Answer 1

您使用的authStage_getToken函数是一个普通的Javascript函数，但由于使用了useSelector，它实际上是一个自定义挂钩，因此您需要像对待LoginScreen上的挂钩一样对待它。如果您将const-result=authStage_getToken((移动到您的userName挂钩下，您应该可以继续操作了。您可以在此处找到有关自定义挂钩的更多信息：https://reactjs.org/docs/hooks-custom.html