在 React 中，如何修复从子组件传递到父 React 功能组件的 infinite/loop 数据

Question

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

这导致我的 React 应用无法正确加载并崩溃。
尽管使用了下面的 React 功能组件，但我能够在没有来自 React Class 组件的循环的情况下正确检索数据，所以我假设是 CallAPI.js 功能 class 问题

子组件：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 `

在 React 中，如何修复从子组件传递到父 React 功能组件的 infinite/loop 数据

In React, how to fix the infinite/loop data passing from the child component to parent react functional component

infinite-loop

reactjs

react-functional-component