मेरे पास एक कार्यात्मक घटक में निम्नलिखित है।

const [trucks, setTrucks] = React.useState([]);

React.useEffect(() => {
    Request.getTrucksForToday().then((x) => {setTrucks(x)}); // <-- this is an async function to an axios request
});

return (
...

{trucks.map((truck) =>{return<LocalShippingIcon lat={truck.latitude} lng={truck.longitude} text={truck.name}/>})}
...
);

इस समस्या के लिए मैंने जितने भी समाधान देखे हैं, वे केवल async फ़ंक्शन को componentDidMount() (1, < में डालने का सुझाव देते हैं। a href="https://stackoverflow.com/a/54229255/10973706">2)। क्या ऐसा किए बिना इसे हल करने का कोई तरीका है?

पूर्णता के लिए यहाँ कार्य है

export function getTrucksForToday() {
  return axios({
    method: "GET",
    url: constants.backend_url + "schedule/getTrucksForToday",
    headers: request_headers
  })
    .then(function(response) {
      console.log(response.data);
      return response.data;
    })
    .catch(function(error) {
      console.log(error);
      return error;
    });
}
0
WhiffWham 3 अप्रैल 2020, 23:28

1 उत्तर

सबसे बढ़िया उत्तर

[] को useEffect() में जोड़ें

const [trucks, setTrucks] = React.useState([]);

React.useEffect(() => {
    Request.getTrucksForToday().then((x) => {setTrucks(x)}); // <-- this is an async function to an axios request
},[]);

return (
...

{trucks.map((truck) =>{return<LocalShippingIcon lat={truck.latitude} lng={truck.longitude} text={truck.name}/>})}
...
);
0
Kesav 3 अप्रैल 2020, 20:32