使用Material UI Drawer时传递setReplyDrawer给子组件触发点击事件报错：setReplyDrawer is not a function

嘿，我一眼就看出问题出在哪了！你这个报错的核心原因是对React组件的props传递机制理解有误。

问题根源 #

React中，父组件传递给子组件的所有props都会被打包成一个单独的对象传递过去，但你在ReplyReview组件里把参数定义成了多个独立变量：

const ReplyReview = (name,replyDrawer,setReplyDrawer,first,setFirst) => { ... }

这就导致第一个参数name实际上接收到的是整个props对象，而后面的replyDrawer、setReplyDrawer等参数全都是undefined——你调用一个undefined的东西当函数，当然会报错啦！

解决方案 #

只需要把ReplyReview的参数改成对象解构的形式，就能正确从props对象里提取出你需要的属性了：

修改后的ReplyReview.jsx代码：

import { Button, Drawer, IconButton, InputBase, Paper, SwipeableDrawer } from '@mui/material'
import React, { useState } from 'react'
import { BsSearch } from "react-icons/bs";
import { AiOutlinePlusCircle } from "react-icons/ai";
import { BiArrowBack } from "react-icons/bi";
import './ReplyReview.css'

// 用对象解构接收props
const ReplyReview = ({name,replyDrawer,setReplyDrawer,first,setFirst}) => {
  const [buttonClicked, setButtonClicked] = useState(false)
  const drawerWidth = 500;
  console.log(replyDrawer,setReplyDrawer) // 现在这里能正确打印出值了
  return (
    <div className='reply-review-container'>
      <header>
        <Button onClick={()=>setReplyDrawer(false)}><BiArrowBack/></Button>
        <strong>Start messaging {name.name}</strong>
      </header>
    </div>
  )
}

export default ReplyReview

这样修改之后，你点击Back按钮时，setReplyDrawer(false)就能正常触发，关闭你的Material UI Drawer组件了，同时name也能正确拿到父组件传递过来的值。

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