React 组件间状态更新函数传递的 TypeError 解析与文件组织策略

// Home.js (假设是主文件)
const Home = () => {
   const [exercises, setExercises] = useState([]);
   const [bodyPart, setBodyPart] = useState("all");

   return (
     <Box>
       <HeroBanner />
       <SearchExercises
         setExercises={setExercises}
         bodyPart={bodyPart}
         setBodyPart={setBodyPart} // setBodyPart 在此被传递给 SearchExercises
       />
       <Exercises
         setExercises={setExercises}
         exercises={exercises}
         bodyPart={bodyPart}
       />
      </Box>
    );
  };

// BodyPart.js (假设是另一个文件)
const BodyPart = ({ item, setBodyPart, bodyPart }) => { // BodyPart 期望接收 setBodyPart
  return (
    <Stack
      onClick={() => {
        setBodyPart(item); // 在此调用 setBodyPart
        window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
      }}
    >
      {/* ... */}
    </Stack>
  );
};

// Home.js
import React, { useState } from 'react';
import { Box, Stack } from '@mui/material'; // 假设的UI组件库
// import HeroBanner from './HeroBanner'; // 假设 HeroBanner 仍是独立组件
// import Exercises from './Exercises'; // 假设 Exercises 仍是独立组件

// BodyPart 组件定义 (移至 Home.js 内部或其上方)
const BodyPart = ({ item, setBodyPart, bodyPart }) => {
  return (
    <Stack
      // ... 样式和布局
      onClick={() => {
        setBodyPart(item); // setBodyPart 在此直接可用
        window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
      }}
    >
      {/* ... 其他内容，例如 item 的显示 */}
      <div>{item}</div>
    </Stack>
  );
};

// SearchExercises 组件定义 (如果它内部使用了 BodyPart，也移至 Home.js 内部或其上方)
const SearchExercises = ({ setExercises, bodyPart, setBodyPart }) => {
  // 假设 SearchExercises 内部会渲染 BodyPart 列表
  const bodyPartsList = ["all", "back", "cardio"]; // 示例数据

  return (
    <div>
      <h2>搜索练习</h2>
      {/* 搜索输入框等 */}
      <Box sx={{ display: 'flex', overflowX: 'auto', mt: 2 }}>
        {bodyPartsList.map((item) => (
          <BodyPart
            key={item}
            item={item}
            setBodyPart={setBodyPart} // 从 Home 传递给 SearchExercises 后，再传递给 BodyPart
            bodyPart={bodyPart}
          />
        ))}
      </Box>
    </div>
  );
};

const Home = () => {
  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>
  );
};

export default Home;

// src/components/Home.js
import React, { useState } from 'react';
import { Box } from '@mui/material';
import SearchExercises from './SearchExercises'; // 正确导入同文件夹下的组件
import Exercises from './Exercises'; // 假设 Exercises 也是同文件夹下的组件
// import HeroBanner from './HeroBanner';

const Home = () => {
  const [exercises, setExercises] = useState([]);
  const [bodyPart, setBodyPart] = useState("all");

  return (
    <Box>
      {/* <HeroBanner /> */}
      <SearchExercises
        setExercises={setExercises}
        bodyPart={bodyPart}
        setBodyPart={setBodyPart} // 将 setBodyPart 传递给 SearchExercises
      />
      <Exercises
        setExercises={setExercises}
        exercises={exercises}
        bodyPart={bodyPart}
      />
    </Box>
  );
};

export default Home;

// src/components/SearchExercises.js
import React from 'react';
import { Box } from '@mui/material';
import BodyPart from './BodyPart'; // 正确导入同文件夹下的 BodyPart

// SearchExercises 必须接收并向下传递 setBodyPart
const SearchExercises = ({ setExercises, bodyPart, setBodyPart }) => {
  const bodyPartsList = ["all", "back", "cardio"]; // 示例数据

  return (
    <div>
      <h2>搜索练习</h2>
      <Box sx={{ display: 'flex', overflowX: 'auto', mt: 2 }}>
        {bodyPartsList.map((item) => (
          <BodyPart
            key={item}
            item={item}
            setBodyPart={setBodyPart} // 将 setBodyPart 再次传递给 BodyPart
            bodyPart={bodyPart}
          />
        ))}
      </Box>
    </div>
  );
};

export default SearchExercises;

// src/components/BodyPart.js
import React from 'react';
import { Stack } from '@mui/material';

// BodyPart 必须接收 setBodyPart 作为 prop
const BodyPart = ({ item, setBodyPart, bodyPart }) => {
  // 最佳实践：在调用前进行类型检查，以提前发现问题
  if (typeof setBodyPart !== 'function') {
    console.error('Error: setBodyPart prop received by BodyPart is not a function.', setBodyPart);
    // 可以选择返回 null 或抛出错误，取决于错误处理策略
    return null;
  }

  return (
    <Stack
      // ... 样式和布局
      onClick={() => {
        setBodyPart(item); // 在此安全地调用 setBodyPart
        window.scrollTo({ top: 180