函数式react等待接口返回数据后再渲染页面

如果你在函数式组件中需要等待接口返回数据后再渲染页面，你可以使用 React Hooks 中的 useState 和 useEffect。

useState 可以用来管理组件内部的状态，使用它可以在组件内部存储接口返回的数据。

useEffect 可以用来执行副作用操作，比如发送异步请求，在接口返回数据后通过 setState 方法来更新组件的状态。

下面是一个简单的代码示例：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://my-api.com/data')
      .then(res => res.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default MyComponent;

在这个示例中，我们使用 useState 来存储接口返回的数据，并在组件初始化时使用 useEffect 来发送异步请求。当接口返回数据后，通过 setData 方法来更新组件的状态。当数据未返回时，组件显示 "Loading..." 提示，否则将接口返回的数据渲染到页面上。