函数组件调用setShowHeaderTitle报错：TypeError: setShowHeaderTitle不是函数

这个错误的核心原因是setShowHeaderTitle没有被正确传递到BodyPart组件，或者在组件内部被错误覆盖/未正确接收，以下是具体排查和解决步骤：

• 检查父组件的props传递
  确保首页路由组件在渲染BodyPart时，确实把状态更新函数作为props传了过去，注意拼写和大小写完全一致：

  // 父组件示例
  const Home = () => {
    const [showHeaderTitle, setShowHeaderTitle] = useState('初始标题');
    
    // 正确传递props，名字必须和子组件里调用的一致
    return <BodyPart setShowHeaderTitle={setShowHeaderTitle} />;
  };
  

• 检查子组件的props接收
  在BodyPart组件中，要确保正确接收这个props：

  • 如果用解构赋值，要保证变量名和父组件传递的一致：

    const BodyPart = ({ setShowHeaderTitle, item, Icon }) => {
      // 这里可以直接调用setShowHeaderTitle
    };
    

  • 如果不用解构，要通过props.setShowHeaderTitle调用，不要写错路径：

    const BodyPart = (props) => {
      // 调用时要写props.setShowHeaderTitle
      props.setShowHeaderTitle('Showing Results:');
    };
    

• 排查组件内部的变量重名
  检查BodyPart组件内部有没有定义和setShowHeaderTitle同名的变量，比如自己声明了一个同名的state或者函数，这会覆盖props传入的函数，导致调用时出错。

• 检查中间组件的props传递（如果有嵌套）
  如果BodyPart是通过其他组件嵌套渲染的，比如父组件→中间组件→BodyPart，那中间组件必须把setShowHeaderTitle这个props继续传递给BodyPart，不能在中间环节断掉。

按照上面的步骤排查后，你的点击事件里调用setShowHeaderTitle就不会再报“不是函数”的错误了。

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