Reactjs 使用效果不'；I don’我没有表现得像预期的那样-

当我刷新页面时，useEffect只呈现内部两个函数中的一个，当我更改路由时，它正常工作

我正在使用redux设置车辆的全局状态，并在useffect中调度API 所以我一直都有可用的车辆。但是，第二个函数

vchStatusNumbers

应该返回根据其状态过滤的数组长度，它只运行一次，当我将其状态添加为依赖项时，我得到一个无限循环

我需要了解我应该如何处理它

下面是组件

import React,{useEffect,useState} from "react";
import StatisticBanner from "./StatisticBanner";
import {getAllVehicles,fetchVehiclesReport } from "./vehiclesReducer";
import { useSelector, useDispatch } from "react-redux";

 const Home= ()=> {
  const {vehicles} = useSelector(getAllVehicles); // get the state
const [statusTotal, setStatusTotal] = useState({})
  const dispatch = useDispatch(); // dispatch fn to reducers



  useEffect(() => {
    dispatch(fetchVehiclesReport());
    vchStatusNumbers();
  }, [dispatch]);

  const vchStatusNumbers = () =>{
    const status = {}
    let availableLength = 0
    let parkedLength = 0
    let serviceLength = 0
      vehicles.map(vch=>{
      if(vch.status === 'available'){
        ++availableLength
        status.available = availableLength
    
      }
      if(vch.status === 'parked'){
        ++parkedLength
        status.parked = parkedLength
      }
      if(vch.status === 'service'){
        ++serviceLength
        status.service = serviceLength
      }
    })
  
    setStatusTotal (status)
  }

  return (
    <>
        <div style={{ margin: 20 }}>
          <StatisticBanner key={"statics"} statusTotal={statusTotal} />
        </div>
    </>
  );
}
export default   Home

import React，{useffect，useState}来自“React”；
从“/StatisticBanner”导入StatisticBanner；
从“/VehicleReducer”导入{getAllVehicles，FetchVehicleReport}”；
从“react-redux”导入{useSelector，useDispatch}；
常量Home=（）=>{
const{vehicles}=useSelector（getAllVehicles）；//获取状态
const[statusTotal，setStatusTotal]=useState（{}）
const dispatch=useDispatch（）；//将fn分派到减速机
useffect（（）=>{
调度（fetchVehiclesReport（））；
vchStatusNumber（）；
}，[发送]；
常量vchStatusNumber=（）=>{
常量状态={}
让availableLength=0
设parkedLength=0
设serviceLength=0
车辆.地图（vch=>{
如果（vch.status==“可用”）{
++可用长度
status.available=可用长度
}
如果（vch.status===‘已驻车’）{
++停车长度
status.parked=parkedLength
}
如果（vch.status==‘服务’）{
++服务长度
status.service=服务长度
}
})
setStatusTotal（状态）
}
返回(
);
}
导出默认主页

是，如果将依赖项添加到最终更新该依赖项值的

useffect

挂钩，则这将导致渲染循环

似乎

vchStatusNumber

应该位于独立的

useEffect

挂钩中，并依赖于

vehicles

redux状态值

useEffect(() => {
  vchStatusNumbers();
}, [vehicles]);

---

这是因为它是从

车辆

数据中派生出来的状态，在发送更新操作的第一个效果中还不会被更新。

谢谢！我理解生命的循环。但是，我不知道我必须按照逻辑打破使用效果！这是一种有趣的方式！非常感谢