如何在 React 渲染函數中有效使用非同步呼叫？

在React 渲染函數中使用Async/Await：另一種方法

非同步程式設計在React 應用程式中經常遇到，特別是在處理外部事務時資料來源。然而，直接在 React 的 render 函數中使用 async 和 wait 可能會導致意想不到的結果。

為了在 React 中有效地合併非同步調用，常見的方法是利用狀態管理技術。這涉及在單獨的生命週期方法中獲取數據，例如 componentDidMount 或使用 useEffect 等掛鉤，並在數據可用後更新狀態。

考慮以下範例：

<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>

中透過此方法，ParentThatFetches 元件異步取得資料並相應地更新其狀態。一旦資料可用，它就會渲染顯示資料的子元件。

替代方法：伺服器端元件

React 伺服器元件，在 React 18 中引入，提供另一種在 React 應用程式中處理非同步資料的方法。與傳統的用戶端渲染模型不同，React Server Components 在伺服器上渲染，讓您在 HTML 發送到客戶端之前取得和處理資料。

以下是利用 React Server Components 的更新範例：

<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>

在此範例中，getAddressData 函數在伺服器上非同步取得位址。然後，GeoServerComponent 函數接收位址作為 props，並在伺服器上呈現必要的 HTML。這種方式保證了 HTML 發送到客戶端之前資料已經準備好，解決了直接在 render 函數中使用 async 和 wait 時遇到的問題。

以上是如何在 React 渲染函數中有效使用非同步呼叫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！