如何从React函数式组件返回数据且不违反Hook规则

首先得明确：React函数式组件的核心职责是渲染UI，它的返回值必须是可渲染的React节点（JSX、null、字符串等），直接返回JSON对象、整数这类非可渲染类型会触发报错（比如对象会导致React渲染失败），而且你原代码的逻辑还有两个关键问题：

1. myData是普通变量，useEffect里修改它不会触发组件重渲染，所以组件永远返回初始的undefined，拿不到更新后的数据；
2. useEffect是异步执行的，第一次渲染时myData还未被赋值。

下面给两种符合Hook规则的可行方案：

方案一：改成自定义Hook（推荐） #

自定义Hook可以合法使用React Hooks，并且能返回任意类型的数据，完全适配你的需求。把数据获取逻辑封装成Hook，在需要的组件里调用即可：

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

// 自定义Hook，专门处理数据获取逻辑
export function useGetUserEntities() {
  const [myData, setMyData] = useState(null);

  useEffect(() => {
    // 模拟异步数据请求（替换成你的实际业务逻辑）
    const fetchUserData = async () => {
      // 示例：调用API获取数据
      const response = await fetch('/api/user-entities');
      const result = await response.json();
      setMyData(result);
    };

    fetchUserData();
  }, []);

  // 支持返回任意类型数据：字符串、JSON、整数都可以
  return myData;
}

在其他组件里使用这个Hook：

function UserProfile() {
  const userEntities = useGetUserEntities();

  // 拿到数据后可自由处理：传给回调、渲染UI等
  useEffect(() => {
    if (userEntities) {
      // 调用你需要的回调函数
      revCallbackFunction(userEntities);
    }
  }, [userEntities, revCallbackFunction]);

  return (
    <div>
      {userEntities ? (
        <pre>{JSON.stringify(userEntities, null, 2)}</pre>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

方案二：保留组件形式，通过回调传递数据 #

如果一定要做成组件，那组件必须返回React节点，但可以通过传入的回调函数把数据传递出去，同时用状态管理数据：

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

export function RevGetUserEntities({ revCallbackFunction }) {
  const [myData, setMyData] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      const response = await fetch('/api/user-entities');
      const result = await response.json();
      setMyData(result);
      // 数据准备完成后，通过回调传递给外部
      revCallbackFunction(result);
    };

    fetchUserData();
  }, [revCallbackFunction]);

  // 组件必须返回React节点，这里返回null作为占位（不会渲染任何内容）
  return null;
}

在父组件中使用：

function ParentComponent() {
  const handleUserEntities = (data) => {
    // 拿到数据后的自定义处理逻辑
    console.log('用户实体数据：', data);
  };

  return (
    <>
      <RevGetUserEntities revCallbackFunction={handleUserEntities} />
      {/* 其他UI组件 */}
    </>
  );
}

内容的提问来源于stack exchange，提问作者Program-Me-Rev