reactjs - 在 ts 中实现 UseAuth0()

Question

我正在尝试在 ts 文件中使用 UseAuth0() 挂钩，但收到此错误：错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

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

我已经在使用这个钩子了，但是在我项目的 js 文件中，一切都很好。但是当我试图从这个函数中检索一些数据时，它没有。我究竟做错了什么？

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Link, NavLink } from 'react-router-dom';
import { Forum } from './forumpage';
import { ForumMessagges } from './forumpage'
import { useAuth0 } from "@auth0/auth0-react";
import { Message } from 'typescript/lib/protocol';
interface AddBookDataState {
    title: string;
    loading: boolean;
    forum: Forum;
    messages: ForumMessagges;
    mesmassive: ForumMessagges[];
    path: string;
    nick: string;
}
export const Pro = () => {
    const { user } = useAuth0();
    return (
        user?.email
    )
}
export class Messages extends React.Component<RouteComponentProps<{}>, AddBookDataState> {
    constructor(props) {
        super(props);
        this.state = { title: "", loading: true, nick: "", forum: new Forum, mesmassive: [], messages: new ForumMessagges, path: "data:image/png;base64," };

        var forumid = this.props.match.params["forumid"];

        fetch('/api/ForumMessages/Index')
            .then(response => response.json() as Promise<ForumMessagges[]>)
            .then(data => {
                this.setState({ mesmassive: data });
            });

        // This will set state for Edit employee
        if (forumid > 0) {
            fetch('/api/Forum/Details/' + forumid)
                .then(response => response.json() as Promise<Forum>)
                .then(data => {
                    this.setState({ title: "Чат", loading: false, forum: data });
                });
        }

        // This binding is necessary to make "this" work in the callback
        this.handleSave = this.handleSave.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
    }

    public render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.renderCreateForm();

        return <div>
            <h1>{this.state.title}</h1>
            <NavLink to="/forum">Повернутись до Форуму</NavLink>
            <hr />
            {contents}
        </div>;
    }

    // This will handle the submit form event.
    public handleSave(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        fetch('/api/Book/Create', {
            method: 'POST',
            body: data,

        }).then((response) => response.json())
            .then((responseJson) => {
                this.props.history.push("/forum");
            })
    }

    // This will handle Cancel button click event.
    private handleCancel(e) {
        e.preventDefault();
        this.props.history.push("/forum");
    }
    fileSelectHandler = e => {
        const param = e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(param);
    };
    // Returns the HTML Form to the render() method.
    private renderCreateForm() {
        return (
            <div>
                <div className="form-group col" >
                    <input type="hidden" name="forum_Id" value={this.state.forum.id} />
                </div>
                < div className="form-group col" >
                    <label className=" control-label col-md-12" htmlFor="Name">Назва обговорення: {this.state.forum.title}</label>
                </div >
                <div className="form-group col">
                    <label className=" control-label col-md-12" htmlFor="Name">Автор: {this.state.forum.creator}</label>
                </div >
                <div className="form-group col">
                    <label className=" control-label col-md-12" htmlFor="Name">Дата створення: {this.state.forum.dateOfCreation.toString()}</label>
                </div>
                <br />
                <div className='chatting'>
                    {this.state.mesmassive.map(m =>
                        m.forum_Id == this.state.forum.id ?
                            <div >
                                <label className='coloring'>{m.messageSender}</label>
                                <br />
                                <label className='coloring'>{m.message}</label>
                            </div>
                            : null)}
                </div>
                <form onSubmit={this.handleSave}>
                    <div>
                        <input type="hidden" defaultValue={Pro()} />
                        <input type="text" placeholder="Напишіть повідомлення" defaultValue={this.state.messages.message} />
                    </div>
                    <br/>
                <div className="form-group col">
                    <button type="submit" className="btn btn-default buta">Відправити</button>
                    <button className="btn buta" onClick={this.handleCancel}>Повернутись</button>
                    </div >
                </form>
            </div >
        )
    }
}

标签： reactjs