React Hook“useParams”在函数“fetchMentors”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数

Question

我有以下代码

import React, { useState, useEffect } from 'react';
import Axios from "axios";
import {NavLink, useParams} from "react-router-dom";
import Spinner from '../../Spinner';

function MentorList() {
    const [categoriesResult, setCategoriesResult] = useState([]);
    const [mentorsResult, setMentorsResult] = useState([]);
    const [categoriesToId, setCategoriesToId] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');

    useEffect(() => {
        const fetchCategories = () => {
            Axios.get("https://localhost:4000/categories", {}).then((response) => {
                if (response.data.status === "ok") {
                    setCategoriesResult(Object.keys(response.data.result));
                    setCategoriesToId(response.data.result);
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error signing you in. Please try again later.");
                setLoading(false);
            });
        };

        const fetchMentors = () => {
            const { categoryId } = useParams();
            if (categoryId) {
                console.dir('test');
                Axios.get("https://localhost:4000/view-by-category/" + categoryId, {}).then((response) => {
                    if (response.data.status === "ok") {
                        setMentorsResult(Object.keys(response.data.result));
                        setLoading(false);
                    } else {
                        setError(response.data.error);
                        setLoading(false);
                    }
                }).catch(err => {
                    console.dir(err);
                    setError("There was an error with the request. Please try again later.");
                    setLoading(false);
                });
            }
        };

        fetchCategories();
        fetchMentors();
    }, []);

    if (loading) {
        return <Spinner />;
    }

    if (mentorsResult && categoriesResult) {
        var mentors = mentorsResult.map(mentor => {
            return <div className="row">
                <p className="mentor-profile-name">{mentor.name}</p>
                <p className="mentor-profile-bio">{mentor.shortBio}</p>
                <NavLink to={`/mentor/${mentor.id}`} exact>View Profile</NavLink>
            </div>
        })
        var categories = categoriesResult.forEach(item => {
            return <div className="row"><NavLink to={`/mentors/${item.id}`} exact>{item.name}</NavLink></div>
        });

        return <div className="container">
            <div className="col-3">
                {categories}
            </div>
            <div className="col-9">
                {mentors}
            </div>
        </div>
    } else {
        return <div></div>;
    }
};
export default MentorList;

当我运行它时出现以下错误

src/components/Mentor/MentorList.js 第 32:36 行：在函数“fetchMentors”中调用 React Hook“useParams”，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。React 组件名称必须以大写字母开头。React Hook 名称必须以单词“use”开头react-hooks/rules-of-hooks

有人可以帮忙吗？

Answer 1

import React, { useState, useEffect } from 'react';
import Axios from "axios";
import {NavLink, useParams} from "react-router-dom";
import Spinner from '../../Spinner';

function MentorList() {
    const [categoriesResult, setCategoriesResult] = useState([]);
    const [mentorsResult, setMentorsResult] = useState([]);
    const [categoriesToId, setCategoriesToId] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const { categoryId } = useParams();

    useEffect(() => {
        const fetchCategories = () => {
            Axios.get("https://localhost:4000/categories", {}).then((response) => {
                if (response.data.status === "ok") {
                    setCategoriesResult(Object.keys(response.data.result));
                    setCategoriesToId(response.data.result);
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error signing you in. Please try again later.");
                setLoading(false);
            });
        };

        fetchCategories();
    }, []);
    
    useEffect(() => {

        const fetchMentors = () => {
            console.dir('test');
            Axios.get("https://localhost:4000/view-by-category/" + categoryId, {}).then((response) => {
                if (response.data.status === "ok") {
                    setMentorsResult(Object.keys(response.data.result));
                    setLoading(false);
                } else {
                    setError(response.data.error);
                    setLoading(false);
                }
            }).catch(err => {
                console.dir(err);
                setError("There was an error with the request. Please try again later.");
                setLoading(false);
            });
        };
        
        if (categoryId) {
            fetchMentors();
        }
    }, [categoryId]);

    if (loading) {
        return <Spinner />;
    }

    if (mentorsResult && categoriesResult) {
        var mentors = mentorsResult.map(mentor => {
            return <div className="row">
                <p className="mentor-profile-name">{mentor.name}</p>
                <p className="mentor-profile-bio">{mentor.shortBio}</p>
                <NavLink to={`/mentor/${mentor.id}`} exact>View Profile</NavLink>
            </div>
        })
        var categories = categoriesResult.forEach(item => {
            return <div className="row"><NavLink to={`/mentors/${item.id}`} exact>{item.name}</NavLink></div>
        });

        return <div className="container">
            <div className="col-3">
                {categories}
            </div>
            <div className="col-9">
                {mentors}
            </div>
        </div>
    } else {
        return <div></div>;
    }
};
export default MentorList;

React hooks 不能在内部useEffect或任何函数中调用，因此您应该直接在组件内部使用它。