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

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

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

考慮以下範例：

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 ? (
      
    ) : null;
  }
}

const Child = ({ data }) => (
  
    {data.map((x, i) => (
      {x}
    ))}
  
);

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

替代方法：伺服器端元件

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

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

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 (
    
        {data.map(({ address, email, mobile }, index) => (
          
        ))}
      

      

            
{address}
            
Goa
            
asdsad
            
{email}
            
{mobile}
          
    
  );
}

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