TypeError：uniqueCategories.map 不是函数

Question

我是 Next 和 Typescript 的新手，无法解决问题，我已经尝试了在互联网上找到的所有可能的选项，并认为问题可能是答案是旧的并且某些内容已经改变......

我在尝试为 menu 制作类别过滤器时在我的餐厅网站项目中遇到此错误。 我应该从菜单中获取类别。我使用 Set 从菜单数据中获取唯一类别，然后从对象 uniqueCategoriesSet 创建一个数组 （我刚刚在互联网上读到它可以解决“TypeError：uniqueCategories.map 不是函数”的问题，但事实并非如此）。 在此之前，我只是将 unuqieCategoriesSet 作为 props 传递给 CategoryButtons，并且 CategoryButtons 组件中存在同样的问题和另一个问题：“参数‘uniqueCategoriesSet’隐式具有‘any’类型。”

我正在使用框架 Next 和 Typescript

我真的很感谢任何帮助！

page.tsx：

"use client"
import React, {useEffect} from 'react'
import { menu } from '../data'
import Link from 'next/link'
import Image from 'next/image'
import CategoryButtons from '../components/CategoryButtons'

const MenuPage = () => {
  const uniqueCategoriesSet = new Set<string>();
  menu.forEach(item => {
    uniqueCategoriesSet.add(item.cat);
  });
  const uniqueCategories: string[] = Array.from(uniqueCategoriesSet);
  return (
    <div className='p-4  '>
      <h1 className='text-center'>Menu</h1> 
      <CategoryButtons {...uniqueCategories}/>
      <div className=" flex flex-wrap">
        {menu.map(item=>(
        <div className=' w-full h-[60vh] flex flex-col items-center justify-center border-2 sm:w-1/2 md:w-1/3 lg:w-1/4'>
          <div className='relative h-[60%] w-full '>
            <Image src="/fruit-salad.png" alt="" fill className='object-contain'/>
          </div>
          <div className='p-4'>
            <h1 className='font-bold'>{item.title}</h1>
            <p>Desc</p>
            <span className='font-bold'>Price</span>
          </div>
        </div>
        ))}
      </div>
    </div>
  )
}


export default MenuPage

类别按钮.tsx：

import React from 'react'


const CategoryButtons = (uniqueCategories:string[]) => {
    console.log(typeof(uniqueCategories));
  return (
    <div className='flex items-center gap-2 h-12'>
        <button className='bg-green-600 p-1 text-sm text-white rounded-md'>All</button>
           {uniqueCategories.map((item)=>(
            <button className='bg-green-600 p-1 text-sm text-white rounded-md'>
                {item}
            </button>
       ))}
    </div>
    )
}
export default CategoryButtons

my data - menu:
interface Menu  {
        id: number;
        cat: string;
        title: string;
        desc?: string;
        img?: string;
};


export const menu:Menu[] = [
    {
        id: 1,
        cat: "starters",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
    {
        id: 2,
        cat: "starters",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
    {
        id: 3,
        cat: "main",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
    {
        id: 4,
        cat: "main",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
    {
        id: 5,
        cat: "drinks",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
    {
        id: 6,
        cat: "drinks",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
    {
        id: 7,
        cat: "desserts",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
    {
        id: 8,
        cat: "desserts",
        title: "Fruit salad",
        desc: "Strawberry, banana, avocado",
        img: "/fruit-salad.png",     
    },
]

我只想按下菜单类别（饮料、主菜等）的按钮（CategoryButtons 组件）并能够过滤菜单（MenuPage 页面）

我尝试将 Set uniqueCategoriesSet 传递给 CategoryButtons 因为我认为问题是映射函数不适用于对象，所以我决定从 unuqueCategoriesSet 中创建一个数组 我尝试将 Array uniqueCategories 传递给 CategoryButtons （我检查了 uniqueCategories 的类型，它是一个对象......）

我尝试改变将独特类别传递给类别按钮的方式：

<CategoryButtons {...uniqueCategories}/> <CategoryButtons <CategoryButtons uniqueCategories={uniqueCategories}/>

我尝试更改 CategoryButtons 组件中的参数：

const CategoryButtons = (uniqueCategoriesSet)  const CategoryButtons = (uniqueCategoriesSet:[string]) 

Answer 1

嗨，我来自 Vue，而不是 React，但组件上的分布看起来很奇怪。

：在这一行中，您将 uniqueCategories 数组扩展到 CategoryButtons 组件中。但是，您应该将数组作为 prop 传递，而不是传播其值。要将数组作为 prop 传递，您应该这样做：.

在 CategoryButtons 组件中，确保它正确处理categories 属性。然后，您可以映射类别数组以呈现按钮。