页面多组件 antd 多组件调用同一接口

在Ant Design（React版本）中，如果多个组件需要调用同一个接口，你可以考虑使用Redux或者Context API来管理全局状态，或者使用React的hooks。以下是使用React hooks的一个简单例子：

import React, { useState, useEffect } from 'react';
import { Button, Input } from 'antd';
import axios from 'axios';
 
const MyComponent = () => {
  const [data, setData] = useState({ hits: [] });
  const [isLoading, setIsLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
 
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const result = await axios(
        `https://hn.algolia.com/api/v1/search?query=${searchQuery}`
      );
      setData(result.data);
      setIsLoading(false);
    };
 
    fetchData();
  }, [searchQuery]);
 
  return (
    <div>
      <Input
        value={searchQuery}
        onChange={e => setSearchQuery(e.target.value)}
        placeholder="Search..."
      />
      <Button type="primary" onClick={() => console.log(data)}>
        Search
      </Button>
      {isLoading ? <div>Loading...</div> : null}
      {data.hits.map(item => (
        <div key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </div>
      ))}
    </div>
  );
};
 
export default MyComponent;

在这个例子中，我们使用了useState来保存搜索查询、数据和加载状态。使用useEffect来处理异步请求，并且仅在searchQuery变化时调用接口。这样，无论多少个组件需要调用这个接口，都可以共享同一份状态。