React传递setBodyPart作为props时报错TypeError: setBodyPart is not a function

已在父组件中声明setBodyPart状态并作为props传递给SearchExercises组件，但在BodyPart组件中调用setBodyPart时触发报错：TypeError: setBodyPart is not a function。相关代码如下：

// 父组件代码
const [exercises, setExercises] = useState([]);
const [bodyPart, setBodyPart] = useState("all");

return (
  <Box>
    <HeroBanner />
    <SearchExercises
      setExercises={setExercises}
      bodyPart={bodyPart}
      setBodyPart={setBodyPart}
    />
    <Exercises
      setExercises={setExercises}
      exercises={exercises}
      bodyPart={bodyPart}
    />
  </Box>
);

// BodyPart组件代码
const BodyPart = ({ item, setBodyPart, bodyPart }) => {
  return (
    <Stack
      onClick={() => {
        setBodyPart(item);
        window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
      }}
    >
    </Stack>
  );
}

错误核心是setBodyPart没有被正确传递到BodyPart组件中，需按以下步骤修复：

1. 确保SearchExercises向下传递setBodyPart
   打开SearchExercises组件代码，确认它接收setBodyPart props，并将其传递给内部渲染的BodyPart组件：

   // SearchExercises组件示例
   const SearchExercises = ({ setExercises, bodyPart, setBodyPart }) => {
     // 组件逻辑...
   
     return (
       <div>
         {/* 其他内容 */}
         <BodyPart item="目标部位" setBodyPart={setBodyPart} bodyPart={bodyPart} />
       </div>
     );
   };
   

2. 验证传递链路完整性
   检查props传递路径：父组件 → SearchExercises → BodyPart，确保每一步都显式传递了setBodyPart，没有遗漏。

3. 排查拼写与解构错误

   • 确认所有组件中setBodyPart的变量名拼写一致，无笔误
   • 检查BodyPart组件的props解构是否正确，未写错变量名

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