reactjs - 如何使用两个用useEffect更新相同状态的函数?
问题描述
我试图制作一个对 api 进行两次查询的钩子,然后将结果保存为如下状态:
const useQueryApiInfo = ():UseQueryType=>{
const [state, setState] = useState<stateType>({data:null, error:null, loading:false})
const CURRENT_LOGGED_IN_USER_NAME = getLoggedInUserName();
// for getApiIdeaInfo query
const GetApiIdeaInfo:GetApiIdeaInfoType =async(authState, id, CURRENT_LOGGED_IN_USER_NAME)=>{
const res = await getApiIdeaInfo(authState, id, CURRENT_LOGGED_IN_USER_NAME)
if (res.errors) { setState({ ...state, error: res.errors, loading: false, data: null }) }
if (!res.data) return;
setState({ data:{...state.data?.resFromFetchProposal,resFromApiInfo:res.data.getApiIdeaFullInfo}, error:null, loading:false})
console.log(state,"from getIdea")
}
// for fetchProposal mutation
const FetchProposalsForIdea =async(id:string)=>{
const res = await fetchProposalsForIdea(id)
if (res.errors) { setState({ ...state, error: res.errors, loading: false, data: null }) }
if (!res.data) return;
setState({ data:{...state.data?.resFromApiInfo, resFromFetchProposal:res.data?.fetchProposalsForAnIdea}, error:null, loading:false})
}
return [state, {GetApiIdeaInfo, FetchProposalsForIdea, ReactOnApiIdea}]
}
我在 useEffect 中调用此函数,如下所示:
useEffect(()=>{
updateApiInfo.GetApiIdeaInfo(CURRENT_AUTH_STATE,productId,CURRENT_LOGGED_IN_USER_NAME)
updateApiInfo.FetchProposalsForIdea(productId)
},[])
但问题是它只更新最后一个状态。它没有给出两个查询的结果。我在这里做错了什么?
解决方案
setState((prevState) => {
return {
...prevState,
data: {
...prevState.data,
resFromFetchProposal: res.data?.fetchProposalsForAnIdea
},
error:null, loading:false
}
})
setState((prevState) => {
return {
...prevState,
data: {
...prevState.data,
resFromApiInfo: res.data?.getApiIdeaFullInfo
},
error:null, loading:false
}
})
推荐阅读
- android - Android 10/11:带有 maxSdkVersion 标志的 WRITE_EXTERNAL_STORAGE 警告
- python - 如何从要求文件中为机器上的所有用户安装 python 要求
- kubernetes - Prometheus 目标不显示任何内容
- android - 如何从实时数据库和 Firebase 身份验证中删除用户?安卓Java
- flutter - DateTime.add 方法不会更改 dart 中的年份字段
- php - 数据库连接能否在函数调用 (PHP) 中存活?
- filter - EasyAdmin 3:过滤属性的属性
- javascript - javascript 日期对象在我的日历应用程序中引起了一个有趣的问题
- python - 如何在 django 管理模型中自动添加一个字段来计算年龄
- r - 在大型数据框中找到最接近的 XY 坐标以参考 R 中另一个数据框中的坐标