错误:无效的挂钩调用。钩子只能在函数组件的主体内调用。(带Reactstrap)

// 错误示例
if (condition) {
  useEffect(() => {
    // 你的逻辑
  }, []);
}

useEffect(() => {
  if (condition) {
    // 你的逻辑
  }
}, [condition]);

// 错误示例
for (let i = 0; i < items.length; i++) {
  useEffect(() => {
    // 你的逻辑
  }, []);
}

useEffect(() => {
  items.forEach((item, index) => {
    // 你的逻辑
  });
}, [items]);

// 错误示例
function MyComponent() {
  function nestedFunction() {
    useEffect(() => {
      // 你的逻辑
    }, []);
  }

  return <div onClick={nestedFunction}>Click me</div>;
}

function MyComponent() {
  useEffect(() => {
    // 你的逻辑
  }, []);

  return <div>Click me</div>;
}

// 错误示例
class MyComponent extends React.Component {
  componentDidMount() {
    useEffect(() => {
      // 你的逻辑
    }, []);
  }

  render() {
    return <div>Click me</div>;
  }
}

function MyComponent() {
  useEffect(() => {
    // 你的逻辑
  }, []);

  return <div>Click me</div>;
}

// 自定义Hook
function useCustomHook() {
  useEffect(() => {
    // 你的逻辑
  }, []);
}

// 函数组件
function MyComponent() {
  useCustomHook();

  return <div>Click me</div>;
}