Question

我尝试使用像这样的 react redux hooks 来解决这个问题

import React from 'react';
import { Text, Alert } from 'react-native';
import { Drawer,Container, Content, Header, Right, Button } from 'native-base';
import { FontAwesome } from '@expo/vector-icons'; 
import * as authActions from '../Logout';
import { useDispatch } from 'react-redux';

export default class SideBar extends React.Component {
render() {
    const dispatch = useDispatch();
    //console.log(this.props.usertoken);
    return (
        <Container>
            <Header>
            <Right>
                <Button transparent>
                    <FontAwesome  name="close" size={24} color="#FFFFFF" onPress={() => this.props.closeDrawer()} />
                </Button>   
            </Right>
            </Header>
            <Content>
            
            <Button transparent onPress={() => {
                    dispatch(authActions.logout());
                }}>
                <Text style={{fontSize: 24}}>Log Out</Text>       
            </Button>  
            </Content>
        </Container>
    );
    }
    }

我将以下内容用于 authActions

export const LOGOUT = 'LOGOUT';


export const logout = () => {
return { type: LOGOUT };
};

它显示如下错误：

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用中拥有多个 React 副本

我通过使用“npm i redux react-redux --save”安装了 react redux，但无法想出任何关于如何使用带有 useDispatch 钩子的访问令牌的信息。我是本机反应的新手。请不要提供带有文档链接的答案。

使用访问令牌响应本机注销

0 个答案: