我有這個異步功能：
它undefined在第一次渲染時回傳，然后從 fetch 中回傳資料：
const [
MessageListDataProvider,
useMessageListData
] = constate(() => {
const [messagePath, useMessagePath] = useState(api.UNRESOLVED_MESSAGES_PATH)
const getMessagePath = (newPath) => {
useMessagePath(newPath)
}
const [messages, setMessages] = useState({})
const {
value,
loading,
error,
retry: refresh
} = useAsyncRetry(async () => {
if (!messages[messagePath] && !messages.links ) {
return await api.fetchAllMessages(messagePath).then(async (data) => {
const localData = await data
let localMessages = { ...messages }
localMessages = { ...localMessages, [messagePath] : localData.messages }
localMessages = { ...localMessages, ['links'] : localData.links }
console.log('localMessages', localMessages)
return await localMessages
})
}
}, [messagePath])
console.log('value', value)
return {
getMessagePath,
value,
loading,
error,
refresh
}
})
value undefined
MessageListView.jsx:23 value 23 undefined
MessageListDataProvider.js:34 value undefined
MessageListView.jsx:23 value 23 undefined
MessageListDataProvider.js:28 localMessages {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}}
MessageListDataProvider.js:34 value {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}}
MessageListView.jsx:23 value 23 {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}}
我怎樣才能防止回傳值，undefined因為它導致我在我的<MessageListView />組件中沒有任何一天。
uj5u.com熱心網友回復：
你需要一個加載狀態。初始化狀態加載，然后在MessageListView內部，當值未定義時顯示一個加載器。或者有條件地根本不顯示 MessageListView，而是在狀態設定為加載時顯示加載器。此外，您可能希望將異步呼叫包裝到 react useEffect 回呼中，因為它是一種副作用。
uj5u.com熱心網友回復：
當 async 函式的“if”陳述句失敗時，它會回傳 undefined——你可能應該更好地處理這種情況：
async () => {
if (!messages[messagePath] && !messages.links ) {
...
} else {
return { /* something that's not undefined! */ }
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/397217.html