将useState setter函数传递给click事件的子组件，但获取setState不是函数

Question

我正在使用Material UI Drawer作为侧边栏，并将setReplyDrawer传递给子ReplyReview，这样我就可以通过单击事件从子ReplyReview关闭它，但得到的错误是setReply抽屉不是一个函数
replyDrawer state is used for opening and close a modal.

<Button onClick={()=>setReplyDrawer(false)}>Back</Button>

有人能告诉我我做错了什么或如何纠正吗？

import { Avatar, Box, Button, Container, CssBaseline, Divider, Rating, Select, Stack, SwipeableDrawer } from '@mui/material'
import React, { useState } from 'react'
import { AiFillCaretDown } from "react-icons/ai";
import MouseOverPopover from '../common/MouseOverPopover';
import SelectOptions from '../common/SelectOptions';
import ReplyReview from './ReplyReview';
import { BsChat } from "react-icons/bs";
const ReviewList = ({name,comment,createTime,reply,star}) => {
const [action, setAction] = useState('')
const [showMore, setShowMore] = useState(false)
const [replyDrawer, setReplyDrawer] = useState(false)

return (
<div className='review-list-container'>

{/* some code here*/}
<div className='review-buttons'>

{/* Reply Button */}
<MouseOverPopover 
mainContent={
<Button size='medium' onClick={()=>setReplyDrawer(true)} variant="outlined">
<BsChat style={{fontSize:'27px'}} />
</Button>} 
popoverContent={`Add Tyson Hinton as a contact to start messaging`} 
/>          
<div>

<SwipeableDrawer
sx={{
width: drawerWidth,
zIndex: (theme) => theme.zIndex.drawer + 1,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
padding:'20px'
}}
anchor={'right'}
open={replyDrawer}
onClose={()=>setReplyDrawer(false)}
onOpen={()=>setReplyDrawer(true)}
>
<ReplyReview name={name} replyDrawer={replyDrawer}      setReplyDrawer={setReplyDrawer} />
</SwipeableDrawer>
</div>
</div>      


</div>
)
}
export default ReviewList

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'

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

在ReplyReview中，按钮用于关闭模式

Answer 1

您忘记解构道具

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

至

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

"name.name"；现在应该只是"；name"；

Answer 2

也许您没有以正确的方式调用该函数

function ReplayReview(props){
// here props an object so you need to pull up any value from that object
return   <Button onClick={()=>props.setReplyDrawer(false)}>Back</Button>
}
or 
function ReplayReview({setReplayDrawer})=>{
//You can use object destructure in square bracket into function arguments. For  Example: const obj={a:5,b:10}
//  const {a,b}=obj or const a=obj.a ,const b=obj.b
return <Button onClick={()=>setReplayDrawer(false)}>back</Button>
}