在 React 中，如何修复从子组件传递到父反应功能组件的无限/循环数据

Question

我正在使用prop 将数据从子组件传递到父功能组件。两者都是不同的js文件。每当我使用prop 时，我都会得到从子组件传递的无限/循环数据。我应该如何解决这个问题？

这使我的 React 应用程序无法正确加载并崩溃。
尽管使用了以下反应功能组件，但我能够正确检索数据而无需从反应类组件循环，所以我假设是CallAPI.js 功能类问题

子组件：DropDownList.js
像下面这样...

class DropDownList extends React.Component {

//--body
  render() {

    return (
      <div>
      <CallAPI age={27}/>
      </div>
    );
  }
}

export default DropDownList;

父组件：CallAPI.js
像下面这样..

const CallAPI = () =>{ //create a CallAPI function
  
const [DPID, setText] = useState("");
const [Quote, setText1] = useState("");

let gcmpapi =
  "https://gcm.dellsvc/GCM.Order.API/api/v1/orders/"+ DPID +"/purchase-summary-with-details?countryCode=US"; // declare a variable to store the URL

const [finalprice,setGCMP1] = useState('');
const [totaltax,setGCMP2] = useState('');
const [ShippingAmount,setGCMP3] = useState('');
const [CostPrice,setGCMP4] = useState('');
const [MarginTotal,setGCMP5] = useState('');
const [ListPrice,setGCMP6] = useState('');
const [SellingPrice,setGCMP7] = useState('');
const [DiscountValue,setGCMP8] = useState('');

  const callgcmpapi = () => { //assign a variable for a call function
    Axios.get (gcmpapi).then(
      (response) => { //Success
      console.log(response);
      setGCMP1(response.data.Data.PurchaseSummary.PriceSummary.FinalPrice); // call the value from the multi-dimensional array
      setGCMP2(response.data.Data.PurchaseSummary.PriceSummary.TaxTotal);
      setGCMP3(response.data.Data.PurchaseSummary.PriceSummary.ShippingAmount);
      setGCMP4(response.data.Data.PurchaseSummary.PriceSummary.CostPrice);
      setGCMP5(response.data.Data.PurchaseSummary.PriceSummary.MarginTotal);
      setGCMP6(response.data.Data.PurchaseSummary.PriceSummary.ListPrice);
      setGCMP7(response.data.Data.PurchaseSummary.PriceSummary.SellingPrice);
      setGCMP8(response.data.Data.PurchaseSummary.PriceSummary.DiscountValue);
      })
  };

无限数据循环：Please see the screenshot

Answer 1

你应该在 useEffect() 钩子中调用 API，当组件挂载时你的 api 将被调用：

例如：

useEffect(() => {
  (async() {
    const data = await fetch(...);
    // do something with the data 
  })
}, []) // passing empty dependency for useEffect it should be called one time when component mounted `