reactjs - 自定义钩子卡在递归循环中
问题描述
尝试遵循文档中的示例,我在更新函数中的状态时遇到了无限循环。代码如下:
Home.jsx:
...
import { studentDefaults } from "./student";
import { getStudent } from "./api";
function useStudent() {
const [student, setStudent] = useState(studentDefaults);
function handleStudentChange(student) {
setStudent(student);
}
// Fetch the student after mount
useEffect(() => {
getStudent(handleStudentChange);
});
return student;
}
function StudentForm(props) {
// Use the student here
const student = useStudent();
return ( <MyComponent student={student} /> )
}
api.js:
import request from "request-promise";
import { auth } from "./firebase/firebase";
const url =
"http://localhost:5000/projectID/region/api";
export const getStudent = async handleStudentChange => {
try {
const token = await auth.currentUser.getIdToken(false);
const student = await request(url + `?token=${token}`);
handleStudentChange(student);
} catch (e) {
console.error(e);
}
};
这一切都正确地获取和设置,但它进入了一个递归循环,我不知道为什么。
解决方案
每次运行时都会运行
内部useEffect
。由于您正在更新赋予它的函数中的状态,因此它将无限循环。useStudent
useStudent
通过给useEffect
你一个空数组作为第二个参数,让它在初始渲染后只运行一次。
function useStudent() {
const [student, setStudent] = useState(studentDefaults);
function handleStudentChange(student) {
setStudent(student);
}
// Fetch the student after mount
useEffect(() => {
getStudent(handleStudentChange);
}, []);
return student;
}
推荐阅读
- angular - Angular 阻止外部库触发更改检测
- nfc - 使用 FIDO U2F 虚拟身份验证器在 gmail 中进行两步验证的问题
- nginx - nginx ingress如何替换完整的url?
- python - Dash Bootstrap 组件:重置模式
- kiwi-tcms - SMTP 电子邮件发送不适用于 docker compse
- c# - 我在我的游戏 C# Monogame 中实现“炸弹人爆炸”时遇到问题
- python - 在 matplotlib 中,如何在不调整其他子图大小的情况下将表格添加到子图
- spring - 如何使用 Httpservletresponse 作为参数为控制器编写 Junit 测试?
- php - 用于从本地下载发送带有自动附加 pdf 文件的 whatsapp 消息的按钮 URL
- python - gunicron 无法在指定端口启动