React+TypeScript筛选分类函数的类型定义与错误修复求助

以下针对你代码中的接口定义缺失、隐式类型错误等问题，逐个文件给出修复方案：

1. 完善分类接口定义（categoryInterface.ts） #

明确ICategories接口的属性类型，适配组件props需求：

import { Dispatch, SetStateAction } from 'react';

export interface ICategories {
  // 分类列表：字符串数组
  categories: string[];
  // 当前选中的分类：字符串数组
  filterCategory: string[];
  // 更新选中分类的状态函数
  setFilterCategory: Dispatch<SetStateAction<string[]>>;
}

2. 修复CategoryPage组件类型错误（categoryPage.tsx） #

解决隐式any类型、map无返回值等问题：

import { ChangeEvent } from 'react';
import { ICategories } from './categoryInterface';
// 确保Categories组件已正确导入

export const CategoryPage = ({ categories, filterCategory, setFilterCategory }: ICategories) => {
  // 明确input事件的类型
  const onChange = ({ currentTarget: input }: ChangeEvent<HTMLInputElement>) => {
    if (input.checked) {
      const state = [...filterCategory, input.value];
      setFilterCategory(state);
    } else {
      // 明确filter参数的类型
      const state = filterCategory.filter((val: string) => val !== input.value);
      setFilterCategory(state);
    }
  };

  return (
    <div>
      <h1>Filter By Category</h1>
      <div>
        {/* 修复map回调的返回值问题，同步checkbox选中状态 */}
        {categories.map((category: string) => (
          <div key={category}>
            <input
              type="checkbox"
              value={category}
              onChange={onChange}
              checked={filterCategory.includes(category)}
            />
            <p>{category}</p>
          </div>
        ))}
      </div>
      <Categories />
    </div>
  );
};

修复点说明：

• 给onChange参数添加ChangeEvent<HTMLInputElement>类型，解决input隐式any问题
• 给filter回调的val指定string类型，消除参数隐式any警告
• 修复map回调无返回值的问题，确保分类选项能正常渲染
• 增加checked属性，同步当前分类的选中状态，完善交互逻辑

3. 修复App.tsx中的类型错误 #

解决useState泛型缺失、回调参数类型问题：

import { useState, useEffect } from 'react';
import axios from 'axios';
import { CategoryPage } from './categoryPage';
// 导入其他依赖组件和接口

// 定义obj的类型约束
interface CategoryObj {
  categories?: string[];
}

function App() {
  const [allProducts, setAllProducts] = useState<IProductItem[]>([]);
  const [search, setSearch] = useState("");
  // 给filterCategory指定明确的泛型类型
  const [filterCategory, setFilterCategory] = useState<string[]>([]);
  // 给obj指定类型约束
  const [obj, setObj] = useState<CategoryObj>({});
  const AllProductsContextValue: IAllProductsContext = {
    allProducts: allProducts
  };

  const fetchAllProducts = async () => {
    const response = await axios.get(`/products/?search=${search}&category=${filterCategory.toString()}`);
    setAllProducts(response.data);
  };
  
  useEffect(() => {
    fetchAllProducts();
  }, [search, filterCategory]);

  return (
    <AllProductsContext.Provider value={AllProductsContextValue}>
      <ShoppingCartProvider>
        <Container className="mb-4">
          <Router>
            <Header />
            <Routes>
              <Route path='/categories' 
                element={<CategoryPage 
                    filterCategory={filterCategory} 
                    categories={obj.categories || []} 
                    // 直接传递状态更新函数，避免冗余匿名函数
                    setFilterCategory={setFilterCategory}
                    />} 
                />
            </Routes>
          </Router>
        </Container>
      </ShoppingCartProvider>
    </AllProductsContext.Provider>
  );
}

修复点说明：

• 定义CategoryObj接口约束obj的类型，解决useState隐式any问题
• 给filterCategory的useState添加string[]泛型，明确状态类型
• 简化setFilterCategory的传递逻辑，直接使用原始状态更新函数即可
• 用obj.categories || []简化空值判断，代码更简洁

内容的提问来源于stack exchange，提问作者thegreenedition