Bagaimana untuk Menggunakan Panggilan Asynchronous dengan Berkesan dalam Fungsi React Render?

Menggunakan Async/Await dalam Fungsi Render React: Pendekatan Alternatif

Pengaturcaraan tak segerak sering ditemui dalam aplikasi React, terutamanya apabila berurusan dengan luaran sumber data. Walau bagaimanapun, menggunakan async dan menunggu terus dalam fungsi pemaparan React boleh membawa kepada hasil yang tidak dijangka.

Untuk menggabungkan panggilan tak segerak dengan berkesan dalam React, pendekatan biasa ialah menggunakan teknik pengurusan keadaan. Ini melibatkan pengambilan data dalam kaedah kitaran hayat yang berasingan, seperti componentDidMount atau menggunakan cangkuk seperti useEffect dan mengemas kini keadaan sebaik sahaja data tersedia.

Pertimbangkan contoh berikut:

<code class="javascript">class ParentThatFetches extends React.Component {
  constructor() {
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("/some/async/data")
      .then(resp => resp.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? (
      <Child data={this.state.data} />
    ) : null;
  }
}

const Child = ({ data }) => (
  <tr key={index}>
    {data.map((x, i) => (
      <td key={i}>{x}</td>
    ))}
  </tr>
);</code>

Dalam pendekatan ini, komponen ParentThatFetches mengambil data secara tidak segerak dan mengemas kini keadaannya dengan sewajarnya. Setelah data tersedia, ia memaparkan komponen Kanak-kanak, yang memaparkan data.

Pendekatan Alternatif: Komponen Bahagian Pelayan

Komponen Pelayan React, diperkenalkan dalam React 18 , sediakan pendekatan lain untuk mengendalikan data tak segerak dalam aplikasi React. Tidak seperti model pemaparan sisi klien tradisional, Komponen Pelayan React dipaparkan pada pelayan, membolehkan anda mengambil dan memproses data sebelum HTML dihantar kepada pelanggan.

Berikut ialah contoh dikemas kini yang memanfaatkan Komponen Pelayan React:

<code class="javascript">import Geocode from "react-geocode";
import _ from "lodash-es";

const getAddressData = async (getCompanyUserRidesData = []) =>
  Promise.all(
    getCompanyUserRidesData.map(async (userRides) => {
      const addr = await Geocode.fromLatLng(22.685131, 75.873468);
      const address = addr.results[0].formatted_address;
      const email = _.get(userRides, "driverId.email", "");
      const mobile = _.get(userRides, "driverId.mobile", "");
      return { address, email, mobile };
    })
  );

async function GeoServerComponent({ phase, getCompanyUserRidesData }) {
  const data = await getAddressData(getCompanyUserRidesData);
  return (
    <table>
      <tbody>
        {data.map(({ address, email, mobile }, index) => (
          <tr key={index}>
            <td>{address}</td>
            <td>Goa</td>
            <td>asdsad</td>
            <td>{email}</td>
            <td>{mobile}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}</code>

Dalam contoh ini, fungsi getAddressData mengambil alamat secara tidak segerak pada pelayan. Fungsi GeoServerComponent kemudiannya menerima alamat sebagai prop dan menjadikan HTML yang diperlukan pada pelayan. Pendekatan ini memastikan data sedia sebelum HTML dihantar kepada klien, menyelesaikan isu yang dihadapi apabila menggunakan async dan menunggu terus dalam fungsi pemaparan.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Panggilan Asynchronous dengan Berkesan dalam Fungsi React Render?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!