如何在React JS中停止API数组？

import React, { useState } from 'react';

function App() {
  const [isApiActive, setIsApiActive] = useState(true);

  // 其他组件代码

  return (
    // JSX代码
  );
}

export default App;

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

function App() {
  const [isApiActive, setIsApiActive] = useState(true);

  useEffect(() => {
    // 模拟API数组的更新
    const interval = setInterval(() => {
      if (isApiActive) {
        // 更新API数组的逻辑
        console.log('API数组更新');
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [isApiActive]);

  // 其他组件代码

  return (
    // JSX代码
  );
}

export default App;

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

function App() {
  const [isApiActive, setIsApiActive] = useState(true);

  useEffect(() => {
    // 模拟API数组的更新
    const interval = setInterval(() => {
      if (isApiActive) {
        // 更新API数组的逻辑
        console.log('API数组更新');
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [isApiActive]);

  const handleStopApiArray = () => {
    setIsApiActive(false);
  };

  // 其他组件代码

  return (
    <div>
      {/* JSX代码 */}
      <button onClick={handleStopApiArray}>停止API数组更新</button>
    </div>
  );
}

export default App;