react怎么只让接口请求一次

在React中，如果你想要确保某个接口请求只发起一次，你可以使用React的useEffect钩子结合一个自定义的状态变量来控制。以下是一个简单的示例：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [requested, setRequested] = useState(false);
 
  useEffect(() => {
    const fetchData = async () => {
      if (!requested) {
        setRequested(true);
        const result = await axios(YOUR_API_ENDPOINT);
        setData(result.data);
      }
      setLoading(false);
    };
    fetchData();
  }, []); // 空数组保证了这个effect只在组件挂载时执行一次
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      {/* 渲染数据 */}
      {data}
    </div>
  );
};
 
export default MyComponent;

在这个例子中，useState钩子用来管理数据状态、加载状态和请求状态。useEffect钩子在组件挂载时只执行一次，并且通过requested状态变量来确保接口请求只发起一次。如果requested为true，则不会再次发起请求。设置loading为false来表明数据已经加载完毕。