Блог

Я использую prop для передачи данных из дочернего компонента в родительский функциональный компонент. Оба являются разными файлами js. Всякий раз, когда я использую prop , я получаю бесконечные/циклические данные, передаваемые из дочернего компонента. Как я должен решить эту проблему?

Это приводит к тому, что мое приложение React не может правильно загружаться и аварийно завершается.
Несмотря на использование приведенного ниже функционального компонента react, я могу правильно извлекать данные без цикла из компонента класса React, поэтому я предполагаю CallAPI.js , что проблема в функциональном классе

Дочерний компонент: DropDownList.js
Что-то вроде приведенного ниже…

 class DropDownList extends React.Component {  //--body  render() {   return (  lt;divgt;  lt;CallAPI age={27}/gt;  lt;/divgt;  );  } }  export default DropDownList;  

Родительский компонент: CallAPI.js
Что-то вроде ниже..

 const CallAPI = () =gt;{ //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 = () =gt; { //assign a variable for a call function     Axios.get (gcmpapi).then(       (response) =gt; { //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);       })   };  

Бесконечный цикл передачи данных: Пожалуйста, посмотрите скриншот

Вы должны вызывать API в крючке useEffect (), ваш api будет вызван, когда компонент будет смонтирован:

Экс:

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