Cara Menggunakan Async Await dalam Fungsi Render React dengan Cangkuk

Async Menunggu dalam Fungsi Render React

Memahami Isu

Dalam kod anda, anda cuba menggunakan async menunggu dalam fungsi peta fungsi render. Walau bagaimanapun, pendekatan ini tidak sah kerana fungsi async tidak boleh digunakan secara langsung dalam fungsi render. Fungsi pemaparan React mengharapkan kod segerak.

Pendekatan Betul

Untuk menggunakan operasi tak segerak dalam fungsi pemaparan, anda boleh mengikuti salah satu daripada dua pendekatan:

1. Pengambilan Data dan Pemisahan Komponen

Asingkan logik pengambilan data ke dalam komponen berasingan yang mengendalikan operasi tak segerak. Kemudian, berikan komponen UI secara bersyarat hanya apabila data tersedia.

class ParentComponent 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 }) => (
  <table>
    <tbody>
      {data.map((x, i) => (
        <tr key={i}>
          {x.map((y, j) => <td key={j}>{y}</td>)}
        </tr>
      ))}
    </tbody>
  </table>
);

2. Cangkuk dengan Kesan Async

Gunakan cangkuk React untuk mengurus operasi tak segerak.

const ParentComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const resp = await fetch("/some/async/data");
      const json = await resp.json();
      setData(json);
    };
    getData();
  }, []);

  return data ? <Child data={data} /> : null;
};

Nota Tambahan

• Penggunaan koordinat dalam contoh boleh digantikan dengan nilai longitud dan latitud sebenar.
• Jika rekod data anda mempunyai pengecam unik, gunakannya untuk atribut utama dan bukannya indeks tatasusunan.

Atas ialah kandungan terperinci Cara Menggunakan Async Await dalam Fungsi Render React dengan Cangkuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!