React UseState 在渲染后解析当前值

Question

渲染后，我正在为 useState const 获取当前赋值。我已经在 useEffect 中初始化了 const 值，但仍然无法获得结果。

我在捕获事件的位置有下拉菜单并为 useState 设置新值，然后调用 API 获取数据。我希望当前数据尽快使用 useState 我更改下拉列表中的值？

我遵循了这个答案，但没有得到任何结果，不确定我从这个谜题中遗漏了什么？

const XYZ = () => {
const [siteCoverStatus, setSiteCoverStatus] = useState("ALL");


useEffect(() =>{
 setDefaultSearchCriteria();
 },[setSiteCoverStatus, setEziSearchCriteria]);


const handleCoverStatusFilter = (event) =>{
 if(event!=null){
   setSiteCoverStatus(event.value)

   console.log("cover status new val ==", event.value );
   console.log("cover status siteCoverStatus ==", siteCoverStatus);
   handleSearchCriteriaUpdate();
 }
}

const handleSearchCriteriaUpdate = () =>{
 var criteria : IEziStatusSearchCriteriaForm = {
  startTime: startDate.toLocaleDateString(),    
  endTime:  endDate.toLocaleDateString(),       
  schedAction_Active: recordSchedAction,
  isActive: siteActiveStatus,
  queryKeyword: search,
  coverStatus: siteCoverStatus,
  siteId: fiteredSiteId,
  managerId: filteredManagerId
 }

 setEziSearchCriteria(criteria);

 var keyValue = criteria.startTime+criteria.endTime+criteria.schedAction_Active+criteria.isActive+criteria.coverStatus+criteria.queryKeyword+criteria.siteId+criteria.managerId;
 setAppSwtichKey(keyValue);
 }


  <div className= "input-child-block input-block">
     <Select 
       options={eziSitesStatusCovers}
       onChange = {handleCoverStatusFilter}
       isClearable={true} 
       placeholder={siteCoverStatus}
     />
  </div>

Answer 1

由于 handleSearchCriteria 取决于更新状态 siteCoverStatus，您可以在 useEffect 中调用它，依赖性为 siteCoverStatus。

此外，由于您希望在所有处理完成后清除 searchCriteria，因此您可以在更新 eziSearchCriteria 后执行此操作。

const XYZ = () => {

    const [siteCoverStatus, setSiteCoverStatus] = useState("ALL");
    
    
    useEffect(() =>{
     setDefaultSearchCriteria();
     },[eziSearchCriteria]);

   useEffect(() => {

      if(siteCoverStatus) {
          handleSearchCriteriaUpdate();
      }

   }, [siteCoverStatus])
    
    const handleCoverStatusFilter = (event) =>{
     if(event!=null){
       setSiteCoverStatus(event.value)
     }
    }
    
    const handleSearchCriteriaUpdate = () =>{
     var criteria : IEziStatusSearchCriteriaForm = {
      startTime: startDate.toLocaleDateString(),    
      endTime:  endDate.toLocaleDateString(),       
      schedAction_Active: recordSchedAction,
      isActive: siteActiveStatus,
      queryKeyword: search,
      coverStatus: siteCoverStatus,
      siteId: fiteredSiteId,
      managerId: filteredManagerId
     }
    
     setEziSearchCriteria(criteria);
    
     var keyValue = criteria.startTime+criteria.endTime+criteria.schedAction_Active+criteria.isActive+criteria.coverStatus+criteria.queryKeyword+criteria.siteId+criteria.managerId;
     setAppSwtichKey(keyValue);
  }

  <div className= "input-child-block input-block">
     <Select 
       options={eziSitesStatusCovers}
       onChange = {handleCoverStatusFilter}
       isClearable={true} 
       placeholder={siteCoverStatus}
     />
  </div>

React UseState 在渲染后解析当前值

React UseState resolve current value after rendering

reactjs

use-effect

use-state