在繼續使用 UseEffect 之前，我需要等待我的 axios 操作發送
import { getBrief } from '../../store/actions/agency-brief'
import agencyBriefReducer from '../../store/reducers/agency-brief-reducer'
const [agencyBrief, dispatch] = useReducer(agencyBriefReducer, [])
useEffect(async () => {
await getBrief(briefId)(dispatch);
console.log('BRIEF', agencyBrief)
}, [])
所以這里的控制臺日志是未定義的，我需要等待
行動：
export const getBrief = (briefID) => async (dispatch) => {
try {
let res = await axiosInstance.get(`/agency_briefs/reactGetBrief/${briefID}`)
console.log('sre', res )
return dispatch({
type: 'GET_BRIEF',
payload: res.data
})
}
catch (err) {
console.error(err);
}
}
減速器：
const agencyBriefReducer = (state, {payload, type}) => {
switch (type) {
case 'GET_BRIEF':
return {
...state,
brief: payload
}
default:
return state
}
}
我已經嘗試過 async / await 但它不起作用，我需要等待才能使用結果來設定狀態？謝謝
uj5u.com熱心網友回復：
傳入useEffecthook 的函式不能標記為async. 為了克服這個問題，你可以做這樣的事情（基本上將你的代碼包裝在另一個可以是的函式中async）：
useEffect(() => {
doStuff();
}, []);
const doStuff = async () => {
await getBrief(briefId)(dispatch);
console.log('BRIEF', agencyBrief)
}
uj5u.com熱心網友回復：
好的，所以其中一條評論建議使用 2 個 useEffects，這可以解決問題：
useEffect(() => {
getBrief(briefId)(dispatch);
}, [])
useEffect(() => {
console.log('BRIEF', agencyBrief)
}, [agencyBrief.brief])
uj5u.com熱心網友回復：
這應該可以解決您的問題。
import { getBrief } from '../../store/actions/agency-brief'
import agencyBriefReducer from '../../store/reducers/agency-brief-reducer'
const [agencyBrief, dispatch] = useReducer(agencyBriefReducer, [])
useEffect(async () => {
await getBrief(briefId)(dispatch);
setTimeOut(()=>console.log('BRIEF', agencyBrief),10);
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/447830.html
標籤：javascript 反应