数据更改后停止执行函数(React，useEffect)

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

function MyComponent() {
  const [data, setData] = useState('');

  useEffect(() => {
    // 在这里执行需要在数据更改后停止执行的操作
    console.log('执行副作用操作');

    // 返回一个清理函数，用于在组件卸载或数据更改时停止执行副作用操作
    return () => {
      console.log('停止执行副作用操作');
    };
  }, [data]); // 在data发生变化时重新执行useEffect

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
    </div>
  );
}

export default MyComponent;