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行：React Hook"；useParams"；在函数"中被调用；fetchMentors"；既不是React函数组件，也不是自定义React Hook函数。React组件名称必须以大写字母开头。React Hook名称必须以单词"开头；使用"；反作用挂钩/挂钩规则

有人能帮忙吗？

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钩子不能在useEffect或任何函数内部调用，所以应该直接在组件内部使用。

Answer 2

我只想补充一下这个问题。如果没有将使用useParams()挂钩的功能组件名称大写，也可能出现此问题。

在我的例子中，我只是将rfc的名称大写，错误就消失了。