React传递多个打包props时触发makeButtonClick不是函数错误如何解决

错误触发原因 #

你在Navbar组件中传递参数时，用了展开语法{...navbar}将navbar对象的属性直接拆成了顶层props传给NavButtonStyler，此时NavButtonStyler接收的props里根本没有名为navbar的对象属性，只有直接挂载在props上的buttonClick和makeButtonClick两个值。你在NavButtonStyler中解构navbar的时候拿到的是undefined，后续调用undefined.makeButtonClick自然会抛出类型错误。

修复方案 #

两种方案选一种即可：

• 方案1：修改传参方式，不展开navbar对象，直接作为单独属性传递
  把Navbar组件中所有NavButtonStyler的传参部分，从{...navbar}改成navbar={navbar}即可，示例：

<NavButtonStyler mainprops={mainprops} userprops={userprops} navbar={navbar} place='left' navbutton='the world' />

• 方案2：不修改传参逻辑，调整NavButtonStyler的解构逻辑
  如果不想改上层传参，就把NavButtonStyler里的解构逻辑修改为直接取buttonClick和makeButtonClick，再组装成navbar对象传给子组件：

const NavButtonStyler = (props) => {
  const {mainprops,userprops,buttonClick,makeButtonClick,...navprops} = props;
  const navbar = {buttonClick,makeButtonClick}
  // 后面渲染逻辑保持不变即可
}

其他需要注意的潜在问题 #

1. NavButtonCreator的button标签上你已经手动指定了className和onClick，但后面又写了{...props}，这会把mainprops、userprops这类非标准DOM属性直接挂载到HTML标签上，触发React的无效属性警告，建议改成{...styleprops}只传递样式相关属性。
2. 你写的useEffect里引用的navbutton变量没有定义，运行时也会抛出错误，需要补充对应变量的定义逻辑。

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