Next.js组件传值报错：setSelectedTag is not a function at onClick

核心问题 #

React组件接收的props是单个对象参数，并非分散的多个独立参数。你当前的BlogFilter组件把tags、selectedTag、setSelectedTag作为独立参数接收，导致实际传入的props对象被赋值给第一个参数tags，剩下的参数均为undefined，因此调用setSelectedTag时会触发“不是函数”的报错。

修复步骤 #

1. 修正子组件的props接收方式 #

将BlogFilter的参数改为解构props对象：

export default function BlogFilter({
  tags,
  selectedTag,
  setSelectedTag
}: {
  tags: any[],
  selectedTag: string,
  setSelectedTag: (value: string) => void
}) {
  return tags?.map((tag: any) => (
    <button
      key={tag}
      onClick={() => {
        setSelectedTag(tag);
      }}
    >
      # {tag}
    </button>
  ));
}

2. （可选）优化类型定义 #

建议替换模糊的any类型，使用更具体的类型约束：

import { Dispatch, SetStateAction } from 'react';

export default function BlogFilter({
  tags,
  selectedTag,
  setSelectedTag
}: {
  tags: string[],
  selectedTag: string,
  setSelectedTag: Dispatch<SetStateAction<string>>
}) {
  return tags?.map((tag) => (
    <button
      key={tag}
      onClick={() => setSelectedTag(tag)}
    >
      # {tag}
    </button>
  ));
}

3. 父组件代码无需修改 #

你的page.tsx传递props的写法是正确的：

export default function Home(post: Post) {
  const [selectedTag, setSelectedTag] = useState('All');
  const arrString = []; // 可填充实际标签数据
  return (
    <BlogFilter
      selectedTag={selectedTag}
      setSelectedTag={setSelectedTag}
      tags={arrString}
    />
  );
}

额外提示 #

• 确保arrString数组不为空，否则不会渲染任何按钮
• 可根据selectedTag给按钮添加选中状态样式，提升交互体验

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