react函数式如何调用接口

在 React 函数式组件中调用接口通常需要使用 React Hooks 中的 useEffect 和 useState。useEffect 用于在组件渲染后执行副作用操作，例如从服务器获取数据，而 useState 用于在组件中存储数据。

下面是一个示例代码：

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

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const responseData = await response.json();
      setData(responseData);
    }
    fetchData();
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

在这个例子中，我们使用 useState 来存储从服务器获取的数据，然后使用 useEffect 在组件渲染后调用 fetch 函数从服务器获取数据，最后将数据存储到 state 中并在组件中渲染。