解决TypeScript中useEffect清理函数及状态类型错误指南

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

useEffect(() => {
  // ... 其他副作用逻辑
  let cancel = false; // 假设 cancel 是在 useEffect 外部或内部声明的变量

  // ... 异步操作

  return () => (cancel = true); // 问题所在
}, [/* 依赖项 */]);

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,
        };
      })
    );
  });

  // 正确的清理函数实现
  return () => {
    cancel = true; // 确保清理函数返回 void
  };
}, [search, accessToken]);

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

import React, { useState, useEffect } from 'react';
// ... 其他导入

function MyComponent({ accessToken }: { accessToken: string }) {
  const [search, setSearch] = useState<string>('');
  // 明确指定 searchResults 的类型为 Track[]
  const [searchResults, setSearchResults] = useState<Track[]>([]);
  // ... 其他状态和逻辑

  useEffect(() => {
    // ... 同上文的 useEffect 逻辑
  }, [search, accessToken]);

  // ... 组件渲染逻辑
}

import React, { useState, useEffect } from 'react';
// 假设 spotifyApi 是一个已经配置好的 Spotify Web API 客户端实例
import spotifyApi from './spotifyApi'; // 假设你有一个这样的导入

// 定义搜索结果的数据结构
interface Track {
  artist: string;
  title: string;
  uri: string;
  albumUrl: string;
}

interface MyComponentProps {
  accessToken: string | null; // accessToken 可能为 null
}

function MyComponent({ accessToken }: MyComponentProps) {
  const [search, setSearch] = useState<string>('');
  // 明确指定 searchResults 的类型为 Track[]
  const [searchResults, setSearchResults] = useState<Track[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 1. 处理空搜索或无访问令牌的情况
    if (!search) {
      setSearchResults([]); // 清空结果
      return; // 提前退出，不执行后续副作用
    }
    if (!accessToken) {
      setSearchResults([]); // 如果没有令牌，也清空结果
      setError('Spotify Access Token is missing.');
      return;
    }

    setLoading(true);
    setError(null);
    let cancelRequest = false; // 用于取消异步请求的标志

    spotifyApi.searchTracks(search, { limit: 10 }) // 可以添加限制
      .then(res => {
        if (cancelRequest) return; // 如果请求已被取消，则不处理结果

        const tracks: Track[] = res.body.tracks.items.map(track => {
          // 找到最小尺寸的专辑图片
          const smallestAlbumImage = track.album.images.reduce(
            (smallest, image) => {
              if (image.height && smallest.height && image.height < smallest.height) {
                return image;
              }
              return smallest;
            },
            track.album.images[0] // 确保有默认值
          );

          return {
            artist: track.artists[0]?.name || 'Unknown Artist', // 处理可能没有 artist 的情况
            title: track.name,
            uri: track.uri,
            albumUrl: smallestAlbumImage?.url || '', // 处理可能没有图片URL的情况
          };
        });
        setSearchResults(tracks);
      })
      .catch(err => {
        if (cancelRequest) return;
        console.error("Error searching tracks:", err);
        setError('Failed to fetch tracks. Please try again.');
        setSearchResults([]); // 出错时清空结果
      })
      .finally(() => {
        if (!cancelRequest) {
          setLoading(false);
        }
      });

    // 清理函数：在组件卸载或依赖项变化时执行
    // 确保返回 void
    return () => {
      cancelRequest = true; // 设置标志，取消正在进行的请求处理
      setLoading(false); // 清理时也重置 loading 状态
    };
  }, [search, accessToken]); // 依赖项数组

  return (
    <div>
      <h1>Spotify 音乐搜索</h1>
      <input
        type="text"
        placeholder="搜索歌曲或艺人..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      {loading && <p>加载中...</p>}
      {error && <p style={{ color: 'red' }}>错误: {error}</p>}

      <div className="search-results">
        {searchResults.length === 0 && !loading && !error && search && <p>没有找到结果。</p>}
        {searchResults.map((track) => (
          <div key={track.uri} className="track-item">
            <img src={track.albumUrl} alt={track.title} style={{ width: '50px', height: '50px' }} />
            <div>
              <h3>{track.title}</h3>
              <p>{track.artist}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default MyComponent;