reactjs - 我正在尝试删除一个项目,但每次单击按钮时都会返回错误“调度不是函数”
问题描述
我正在开发 CRUD 应用程序,我通过 API 获取数据,一切正常,除非我尝试删除项目。如果我点击按钮,它会返回一个错误:
dispatch 不是一个函数。
ADD
和UPDATE
动作工作正常,而不是DELETE
. 如果你想浏览这个项目并给我反馈,可以在Github上找到这个 repo 。
const Return = (props, {dispatch}) =>{
const initialFormState = {
id:props.id, studentID: '', booknum: props.booknum,
rented: '', exist: ''
}
const[data, setData]=useState(initialFormState)
const [modal, setModal] = useState(false);
const handleFormState = e=>{
const {name, value} = e.target
setData({...data, [name]: value})
}
const toggle = () => setModal(!modal);
const studentRented = (studentID, booknum) =>{
let id = []
let num = props.getRented.length
props.getRented.filter((key) =>{
return ((parseInt(key.studentID) === parseInt(studentID)) && (key.booknum == booknum))?
id.push(key.id) : num = num -1
})
return id
}
const studentExist = (studentID)=>{
let num = props.students.length
props.students.filter((student) =>{
return (parseInt(student.studentID) === parseInt(studentID))?
null : num = num - 1
})
return num
}
const onSubmit=(e)=>{
e.preventDefault();
if(!data.booknum || !data.studentID){
setState(() => ({ error: 'One of the field is empty' }));
}else{
const info ={
studentID: data.studentID,
booknum: data.booknum
}
let ids = studentRented(data.studentID, data.booknum)[0]
try{
// this dispatch return an error "dispatch nit a function
(parseInt(studentExist(info.studentID)) === 0) ?
setState(() =>({exist: `This student does not exist`})):
(studentRented(info.studentID, info.booknum).length === 1) ?
dispatch(removeRent({ids})):
setState(() =>({rented: `This student did not checkout this book`}))
}catch(err){
console.log({err: err});
}
}
}
//
return(
<div>
<small color="danger" onClick={toggle}>RETURN</small>
<Modal isOpen={modal} toggle={toggle} >
<ModalHeader toggle={toggle}>Modal title.</ModalHeader>
<ModalBody>
<Form onSubmit={onSubmit}>
<FormGroup>
{data.rented && <p className='error text-danger'>Rented:{data.rented}</p>}
{data.exist && <p className='error text-danger'>Exist:{data.exist}</p>}
<Label for="title">Student ID</Label>
<Input type="number"name="studentID"id="b" value={data.studentID} onChange={handleFormState} />
</FormGroup>
<FormGroup>
<Label for="title">ISBN</Label>
<Input type="text" name="isbn" id="isbn"palceholder="add ISBN" value={data.booknum}
onChange={handleFormState}/>
</FormGroup>
<FormGroup>
<Button color="dark" style={{marginTop: '2rem'}} block>Submit</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
</div>
);
};
const mapStateToProps = (state) =>{
return{
getRented: state.rentReducer,
students: state.studentReducer
}
}
export default connect(mapStateToProps, {getRents, getStudents})(Return);
解决方案
React 函数式组件是函数,但它们只接收一个参数,一个props
对象。react-redux
的connect
HOC 注入了一个dispatch
prop 以及映射state
和dispatch
to props
。
访问props
对象
const Return = (props) => {
...
props.dispatch(...some action object);
...
或在函数签名中解构
const Return = ({ booknum, dispatch, getRented, id, <... other props> }) => {
...
dispatch(...some action object);
...
推荐阅读
- javascript - 引导模式事件 - 在返回之前等待回调完成
- javascript - Javascript:如何使用单选按钮在两个 div 之间显示/隐藏?
- c# - 如何在 ASP.NET Core 中设置运行时身份验证?
- c# - G1ANT studio 的插件菜单中未显示自定义插件
- php - 使用 Laravel 中的验证器检查两个表中两列的唯一性
- oracle-sqldeveloper - 更改查询结果行的高度 - Oracle SQL Developer
- c# - 如何从存在某个字段的 IMongoCollection 中获取所有项目
- reactjs - 带有过滤器的 Webpack Config 多个入口点错误
- r - 理解为处理颜色边距的 scale_fill_continuous_divergingx 输入的参数
- ruby-on-rails - 枚举角色专家