检查 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]);