深入理解React useEffect 清理函数与TypeScript类型约束

useEffect(() => {
  let cancel = false; // 用于标记请求是否应被取消

  // 模拟数据请求
  const fetchData = async () => {
    try {
      // 假设这里是实际的API调用
      const response = await new Promise(resolve => setTimeout(() => resolve("Data fetched"), 1000));
      if (!cancel) {
        console.log(response);
      }
    } catch (error) {
      if (!cancel) {
        console.error("Error fetching data:", error);
      }
    }
  };

  fetchData();

  // 清理函数
  return () => {
    cancel = true; // 在组件卸载或副作用重新执行前标记取消
  };
}, []);

type EffectCallback = () => (void | Destructor);
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };

useEffect(() => {
    if (!search) return setSearchResults([]);
    if (!accessToken) return;

    let cancel = false;
    // ... (spotifyApi.searchTracks 逻辑) ...

    // 错误的清理函数写法
    return () => (cancel = true); // 这里会报错！
}, [search, accessToken]);

interface Track {
  artist: string;
  title: string;
  uri: string;
  albumUrl: string;
}

// 正确的 useState 类型声明
const [searchResults, setSearchResults] = useState<Track[]>([]);

import React, { useEffect, useState } from 'react';
import SpotifyWebApi from 'spotify-web-api-node'; // 假设你使用了这个库

interface Track {
  artist: string;
  title: string;
  uri: string;
  albumUrl: string;
}

// 假设 spotifyApi 已经被初始化
const spotifyApi = new SpotifyWebApi({
  clientId: 'YOUR_CLIENT_ID',
});

function SearchComponent({ accessToken }: { accessToken: string }) {
  const [search, setSearch] = useState<string>('');
  const [searchResults, setSearchResults] = useState<Track[]>([]);

  useEffect(() => {
    if (!accessToken) return;
    spotifyApi.setAccessToken(accessToken);
  }, [accessToken]);

  useEffect(() => {
    if (!search) {
      setSearchResults([]);
      return; // 如果没有搜索词，直接返回，不执行后续逻辑
    }
    if (!accessToken) return;

    let cancel = false;

    spotifyApi.searchTracks(search).then(res => {
      if (cancel) return; // 如果在请求完成前组件已卸载或搜索词改变，则取消操作
      setSearchResults(
        res.body.tracks.items.map(track => {
          const smallestAlbumImage = track.album.images.reduce(
            (smallest, image) => {
              if (image.height < smallest.height) return image;
              return smallest;
            },
            track.album.images[0]
          );

          return {
            artist: track.artists[0].name,
            title: track.name,
            uri: track.uri,
            albumUrl: smallestAlbumImage.url,
          };
        })
      );
    }).catch(error => {
      if (!cancel) {
        console.error("Error searching tracks:", error);
        // 根据需要处理错误，例如清空搜索结果
        setSearchResults([]);
      }
    });

    // 正确的清理函数写法：确保返回 void
    return () => {
      cancel = true; // 赋值操作在代码块内，函数本身没有显式返回值
    };
  }, [search, accessToken]); // 依赖项列表

  return (
    <div>
      <input
        type="text"
        placeholder="搜索歌曲..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <div>
        {searchResults.map((track) => (
          <div key={track.uri}>
            <img src={track.albumUrl} alt={track.title} width="50" />
            <span>{track.title} - {track.artist}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default SearchComponent;