rendered more hooks than during the previous render.

function MyComponent() {
  const [count, setCount] = useState(0); // 正确：在顶层调用Hook

  if (condition) {
    const [otherState, setOtherState] = useState('test'); // 错误：在条件语句中调用Hook
  }

  return <div>{count}</div>;
}

function useCustomHook() {
  const [data, setData] = useState(null); // 正确：在自定义Hook的顶层调用Hook
  useEffect(() => {
    // 副作用逻辑
  }, []);
  return data;
}

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

function Counter() {
  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>
  );
}

export default Counter;