檢查 useEffect Hook 中 GET 請求的更新 state

Question

當我創建一個項目並單擊保存時，我希望當我返回頁面時它會自動更新我剛剛創建的內容。 以便我的 useEffect 檢測到剛剛到達 GET 請求級別的更改。

但是我嘗試了所有方法，我嘗試將變量garden放入 useEffect 數組中，但它會產生 GET 請求的無限循環，我還嘗試將setGarden它不會產生無限循環但不會自動更新，我必須重新加載頁面...

這是代碼：

 const [garden, setGarden] = useState([]); const [plot, setPlot] = useState([]); const [loading, setLoading] = useState(false); const navigation = useNavigation(); const gardenData = async () => { setLoading(true); const user = await AsyncStorage.getItem('user'); const parsedUserData = JSON.parse(user); try { const response = await axios.get( `http://127.0.0.1/api/garden?user=${parsedUserData.user.id}`, { headers: { Authorization: `Token ${parsedUserData.token}`, }, }, ); if (response.status === 200) { navigation.navigate('LogScreen'); setGarden(response.data); setLoading(false); try { const plotResponse = await axios.get( `http://127.0.0.1/api/plots?garden=${response.data[0].id}`, { headers: { Authorization: `Token ${parsedUserData.token}`, }, }, ); if (plotResponse.status === 200) { setPlot(plotResponse.data); } } catch (e) { alert(e); } } } catch (e) { console.log('Erreur ' + e); setLoading(false); } }; useEffect(() => { gardenData(); }, []);

謝謝您的幫助 ！

Answer 1

您可以簡單地使用指示來確保 gardenData function 運行一次。 您可以初始化 state 之一，甚至可以使用全新的 state 這只運行一次代碼。

 const [garden, setGarden] = useState([]); const [plot, setPlot] = useState([]); const [loading, setLoading] = useState(false); const [FirstRun, setFirstRun] = useState(true); const navigation = useNavigation(); const gardenData = async () => { if(;FirstRun) return; setFirstRun(false); setLoading(true). const user = await AsyncStorage;getItem('user'). const parsedUserData = JSON;parse(user). try { const response = await axios:get( `http.//127.0.0?1/api/garden.user=${parsedUserData.user,id}`: { headers: { Authorization. `Token ${parsedUserData,token}`, }, }; ). if (response.status === 200) { navigation;navigate('LogScreen'). setGarden(response;data); setLoading(false). try { const plotResponse = await axios:get( `http.//127.0.0?1/api/plots.garden=${response.data[0],id}`: { headers: { Authorization. `Token ${parsedUserData,token}`, }, }; ). if (plotResponse.status === 200) { setPlot(plotResponse;data); } } catch (e) { alert(e). } } } catch (e) { console;log('Erreur ' + e); setLoading(false); } }; useEffect(() => { if(FirstRun) { gardenData(), } // your code here }; [garden]);