组件中的多个 useEffect 不起作用
Posted
技术标签:
【中文标题】组件中的多个 useEffect 不起作用【英文标题】:multiple useEffect in a component doesn't work 【发布时间】:2020-09-24 07:51:08 【问题描述】:当我从单个 useEffect
调用 API 时,它运行良好。但是,当我尝试从同一组件中的另一个 useEffect
调用另一个 API 时,它会显示 error。
如果可能,请在codesandbox 上查看我的项目。
import React, useEffect, useState from 'react';
import Container, Row, Col from 'react-bootstrap';
const TeacherDashboard = () =>
// console.log(props)
const [appointmentList, setAppointmentList] = useState([]);
const [viewProfile, setViewProfile] = useState([]);
console.log(viewProfile);
useEffect(() =>
async function loadData()
const response = await fetch('http://localhost:4200/appointments')
const data = await response.json();
setAppointmentList(data)
loadData()
, [appointmentList])
useEffect(() =>
async function proData()
const response = await fetch('http://localhost:4200/schedule')
const data = await response.json();
setViewProfile(data)
proData()
, [viewProfile])
return (
<Container>
<Row>
<Col>
appointmentList.map(app =>
<div style=border: '1px solid blue'>
<li>Name : app.name </li>
<li>Id : app.s_id </li>
<li>Sec : app.sec </li>
<li>Email : app.email </li>
<li>Date & Time : app.dateTime </li>
</div>
)
</Col>
</Row>
</Container>
);
;
export default TeacherDashboard;
【问题讨论】:
【参考方案1】:我不确定将appointmentList
和viewProfile
状态都设置为useEffect
挂钩的依赖数组的一部分的目的。当您直接更新 useEffect
钩子中的相应状态时,它们最终都会导致无限循环。
据我所见,您只需要同时发出一次请求,因此您应该使用一个空数组作为依赖数组,这样只有在安装组件时才会调用这两个请求。可以这样做:
useEffect(() =>
async function proData()
const response = await fetch('http://localhost:4200/schedule')
const data = await response.json();
setViewProfile(data)
proData();
async function loadData()
const response = await fetch('http://localhost:4200/appointments')
const data = await response.json();
setAppointmentList(data)
loadData();
, []);
【讨论】:
谢谢。我只是通过 [appointmentList,viewProfile]。然后它的工作 useEffect(() => async function proData() const response = await fetch('localhost:4200/profiles') const data = await response.json(); setViewProfile(data) proData(); async function loadData( ) const response = await fetch('localhost:4200/appointments') const data = await response.json(); setAppointmentList(data) loadData(); , [appointmentList, viewProfile]); 啊,我明白了..!是的,这也有效!搞清楚这一点做得很好以上是关于组件中的多个 useEffect 不起作用的主要内容,如果未能解决你的问题,请参考以下文章
useEffect 清理功能在 React Native 中不起作用
router-outlet @input 装饰器中的多个组件不起作用
cleanup() 在使用 Firebase Firestore onSnapshot 的 useEffect() 中不起作用