如何透過 Hooks 在 React 渲染函數中使用 Async Await

React 渲染函數中的Async Await

理解問題

理解問題

在您的程式碼中，您嘗試在渲染函數的地圖函數中使用非同步等待。但是，這種方法無效，因為非同步函數不能直接在渲染函數中使用。 React 的渲染函數需要同步程式碼。

正確方法

要在渲染函數中使用非同步操作，您可以遵循以下兩種方法之一：

1.資料擷取與元件分離

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

將資料擷取邏輯分離到處理非同步操作的單獨元件中。然後，僅在資料可用時有條件地渲染 UI 元件。

2.具有非同步效果的 Hooks

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

使用 React hooks 來管理非同步操作。

• 附加說明

使用範例中的座標可以替換為實際的經度和緯度值。 如果您的資料記錄具有唯一標識符，請使用它們作為鍵屬性而不是數組索引。

以上是如何透過 Hooks 在 React 渲染函數中使用 Async Await的詳細內容。更多資訊請關注PHP中文網其他相關文章！