钩子只能在函数组件的主体内调用。但是它已经在一个函数中了

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

function MyComponent() {
  // 正确：钩子在函数组件的顶层调用
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

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

  // 使用外部变量来控制是否运行effect
  const runEffect = shouldRunEffect;

  useEffect(() => {
    if (runEffect) {
      // 执行副作用操作
      fetchData().then(setData);
    }
  }, [runEffect]); // 依赖runEffect变量

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

async function fetchData() {
  // 模拟异步数据获取
  return new Promise(resolve => setTimeout(() => resolve('Data fetched'), 1000));
}