组件中的多个 useEffect 不起作用

Posted 2023-02-22

【中文标题】组件中的多个 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]);

啊，我明白了..！是的，这也有效！搞清楚这一点做得很好