React：如何在数据获取后仅调用一次指定函数？

你的代码核心问题是useEffect的回调函数不能返回React元素，它仅用于执行副作用逻辑（比如函数调用、数据处理），渲染逻辑需要放在组件的返回部分单独处理。以下是修正后的实现方案：

基础实现（数据仅获取一次场景） #

function YourComponent(props) {
  const { dataFetched } = props;

  useEffect(() => {
    // 仅当数据完成获取时调用目标函数
    if (dataFetched) {
      chooseRandomRestaurants(4);
    }
  }, [dataFetched]); // 依赖dataFetched，状态从false变为true时触发一次

  // 单独处理Loading渲染逻辑
  if (!dataFetched) {
    return <div>Loading...</div>;
  }

  // 数据就绪后的组件内容
  return (
    <div>
      {/* 你的业务渲染内容 */}
    </div>
  );
}

进阶实现（确保函数精确执行一次） #

如果dataFetched可能因重复获取数据多次变为true，但你需要函数仅执行一次，可以用useRef标记执行状态：

import { useEffect, useRef } from 'react';

function YourComponent(props) {
  const { dataFetched } = props;
  const hasExecuted = useRef(false);

  useEffect(() => {
    if (dataFetched && !hasExecuted.current) {
      chooseRandomRestaurants(4);
      hasExecuted.current = true; // 标记已执行，避免重复调用
    }
  }, [dataFetched]);

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

  return (
    <div>
      {/* 你的业务渲染内容 */}
    </div>
  );
}

关键说明 #

• 渲染逻辑（Loading状态）必须放在组件的返回值中，而非useEffect内部
• 依赖数组[dataFetched]确保仅当数据获取状态变化时触发副作用
• useRef标记可以避免函数因dataFetched重复更新而多次执行

内容的提问来源于stack exchange，提问作者Felix