使用 setState 和 Food Data Central API (USDA) 反應原生無限循環

Question

期望的

我想查詢食品數據中心打開 API 中的數據以顯示在應用程序中。

FDC API： https://fdc.nal.usda.gov/api-guide.html

問題

嘗試使用 setState 記錄從 FDC 食品數據庫檢索到的數據時出現無限循環。

這是我目前擁有的代碼。

import React, { useState } from 'react';
import {
  Text,
  View,
} from 'react-native';

export default function App() {

   const [data, setData] = useState([]);

   const getRecipes = async() => {
    const response = await fetch(
      'https://api.nal.usda.gov/fdc/v1/foods/search?api_key=(MY_KEY_HERE)&query=Cheddar%20Cheese&pageSize=1'
    )

    const dataGrabbed = await response.json();
    
    setData(dataGrabbed);
  }

  getRecipes();

  console.log(data);

  return (
    <View style={{ flex: 1, padding: 24, }}>
      <Text> This is just used as a placeholder </Text>
    </View>
  )
}

現在的問題是，這確實將從 FDC API 抓取的數據正確分配給“數據”，但是它會創建一個無限循環，因為我假設（經過大量研究）是每次調用 setData 時都會調用渲染 function調用它又會再次觸發 function。

有沒有辦法在沒有無限循環的情況下使用 setData ？ 僅僅是為了顯示返回 function 中提供的數據？

注意：我也嘗試在 react native 中使用 class 組件結構，但使用功能組件結構獲得了更好的結果。

（我對 JavaScript 和 React Native 非常陌生）。

Answer 1

在您的情況下導致無限循環的問題是因為每次將某些內容設置為 state 時都會重新渲染功能組件。 僅供參考，每次您從 useState 調用任何function以更新 state 的值時，組件都會重新渲染，並且如果組件重新渲染了解您的所有變量都被再次調用，因此您不能直接創建此const getRecipes 。

為了避免任何此類行為，您可以使用 React 中的另一個鈎子，即useEffect ，這將幫助您僅在需要時進行此調用，例如僅在組件的初始安裝或組件中的某些值發生更改時。 要了解有關它的更多信息，請在https://reactjs.org/docs/hooks-effect.html閱讀有關此鈎子的更多信息。

對於您的情況，您可以將組件更改為如下所示：-

import React, { useState, useEffect } from 'react';
import {
  Text,
  View,
} from 'react-native';

export default function App() {

  const [data, setData] = useState([]);

  useEffect(async () => {
    const response = await fetch(
     'https://api.nal.usda.gov/fdc/v1/foods/search?api_key=(MY_KEY_HERE)&query=Cheddar%20Cheese&pageSize=1'
    );
    const dataGrabbed = await response.json();
    setData(dataGrabbed);
  }, [])    

  console.log(data);

  return (
    <View style={{ flex: 1, padding: 24, }}>
      <Text> This is just used as a placeholder </Text>
    </View>
  )
}

這個useEffect只會使 API 在組件的初始安裝時調用並且不再無限循環。 享受！

Answer 2

你必須從 React 導入 useEffect 來初始化你的“屏幕”的 state 並閱讀更多關於它的信息，我寫了一個應該如何使用的例子：

import React, { useState, useEffect } from 'react';
import {
Text,
View,
} from 'react-native';

export default function App() {

const [data, setData] = useState([]);

useEffect (()=> {
const response = await fetch(
  'https://api.nal.usda.gov/fdc/v1/foods/search?api_key=(MY_KEY_HERE)&query=Cheddar%20Cheese&pageSize=1'
);
const dataGrabbed = await response.json();
setData(dataGrabbed);
}, []);

return (
<View style={{ flex: 1, padding: 24, }}>
  <Text> This is just used as a placeholder </Text>
</View>
)
}

Answer 3

您需要在 useEffect() 中調用您的 api

useEffect(() => {
   // api call goes here
}, []);