Comment utiliser correctement Async/Await dans les fonctions React Render ?

Understanding Async/Await in React Render Functions

Asynchronous programming, enabled by async/await syntax, is common in back-end development, such as Node.js, but can also be applied in front-end scenarios within React render functions.

Use Case: Geocoding with react-geocode

Consider a scenario where you need to obtain the place name for multiple locations using the react-geocode library and display them in a React table:

<code class="js">import React, { useEffect, useState } from 'react';
import Geocode from 'react-geocode';
import _ from 'lodash';

const GeocodeTable = ({ locations }) =&gt; {
  const [addresses, setAddresses] = useState([]);

  useEffect(() =&gt; {
    Promise.all(locations.map(async (loc) =&gt; {
      const address = await Geocode.fromLatLng(loc[0], loc[1]);
      return address.results[0].formatted_address;
    }))
    .then(results =&gt; setAddresses(results));
  }, [locations]);

  return (
    &lt;tbody&gt;
      {addresses.map((addr, idx) =&gt; (
        &lt;tr key={idx}&gt;
          &lt;td&gt;{addr}&lt;/td&gt;
          &lt;td&gt;Goa&lt;/td&gt;
          &lt;td&gt;asdsad&lt;/td&gt;
          &lt;td&gt;{_.get(loc, 'driverId.email', '')}&lt;/td&gt;
          &lt;td&gt;{_.get(loc, 'driverId.mobile', '')}&lt;/td&gt;
        &lt;/tr&gt;
      ))}
    &lt;/tbody&gt;
  );
};</code>

Mistakes to Avoid

In your original code, you attempted to use async/await directly within the map function of the render function. This is not supported and will result in an empty return.

Best Practices

• Separate Data Fetching from Displaying: The recommended approach is to separate data fetching from rendering. Use a parent component to perform asynchronous operations (like geocoding) and conditionally render a child component when the data is available.
• Use Memoization: To optimize performance, consider using memoization techniques, such as useMemo in the parent component, to avoid redundant data fetching.
• TypeScript Support: If using TypeScript, consider defining types for the geocoding results to improve type safety and avoid potential errors.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!