react本机不变冲突:挂钩调用无效

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

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

  // 错误的示例：在条件语句中调用useEffect
  if (shouldFetch) {
    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, [shouldFetch]);
  }

  return (
    <View>
      {data ? <Text>{JSON.stringify(data)}</Text> : <Text>Loading...</Text>}
    </View>
  );
}

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

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

  // 正确的示例：确保useEffect在顶层调用
  useEffect(() => {
    if (shouldFetch) {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }
  }, [shouldFetch]);

  return (
    <View>
      {data ? <Text>{JSON.stringify(data)}</Text> : <Text>Loading...</Text>}
    </View>
  );
}