Bolehkah Anda Menggunakan Async Await Terus Dalam Fungsi Render React?

Async Await in React Render Function

Masalah:
Anda ingin menggunakan ciri async await dalam fungsi render React komponen untuk melaksanakan operasi tak segerak, seperti mengambil data daripada API bahagian belakang. Walau bagaimanapun, anda menghadapi masalah dengan kata kunci await tidak dikenali dalam fungsi pemaparan.

Penyelesaian:

Walaupun anda boleh menggunakan kata kunci async dalam kaedah pemaparan komponen kelas , ia tidak disyorkan kerana pertimbangan prestasi. Sebaliknya, adalah lebih baik untuk memisahkan pengambilan dan paparan data kepada dua komponen berbeza:

Komponen Induk (Pengambilan Data):

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

  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

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

Komponen Anak (Data) Paparan):

<code class="javascript">const ChildComponent = ({ data }) => {
  return (
    <table>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};</code>

Penjelasan:

• Komponen induk ParentComponent mengendalikan pengambilan data daripada API menggunakan fungsi pengambilan.
• Setelah data diterima, ia menetapkan keadaan data, yang mencetuskan pemaparan semula.
• Dalam kaedah pemaparan, komponen induk menyemak sama ada sifat data dalam keadaan wujud. Jika ia berlaku, ia menjadikan komponen kanak-kanak ChildComponent, memberikannya data yang diambil sebagai prop.
• ChildComponent ialah komponen berfungsi tulen yang memaparkan data dalam jadual.

Nota:

Untuk komponen berasaskan cangkuk React, anda boleh menggunakan cangkuk useEffect untuk mengambil data dan mengemas kini keadaan komponen, memisahkan logik pengambilan data daripada fungsi pemaparan.

Atas ialah kandungan terperinci Bolehkah Anda Menggunakan Async Await Terus Dalam Fungsi Render React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!