I have the following code

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;

when I run it I get the following error

src/components/Mentor/MentorList.js Line 32:36: React Hook "useParams" is called in function "fetchMentors" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

Can someone please help?

CodePudding user response：

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 can't be called inside useEffect or any functions, so you should use that directly inside the component.