React-Native，Redux，useSelector 生成错误“无效的钩子调用”

Question

根据之前一篇文章的帮助，我现在使用 React-Native 功能组件和更新的 Redux 挂钩来获取和设置全局 Redux 状态变量。

当我尝试创建一个外部函数（文件“authentication.js”）时，我的问题出现了，该函数试图使用“useSelector”Redux 函数获取存储的变量“username”的值。

它在外部文件“DetailsS​​creen.js”中运行良好，但在其他外部文件“authentication.js”中却失败了，尽管在我未经训练的眼睛看来是相同的代码，但有一些明显的细微差别。

这段代码完美运行：

DetailsS​​creen.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;

但是这段代码会产生错误：“Invalid hook call”

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;

启动此功能的其他文件：

LoginScreen.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