[我正在尝试删除一个项目,但是每次我单击按钮时,它都会返回错误“调度不是函数”]

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[我正在尝试删除一个项目,但是每次我单击按钮时,它都会返回错误“调度不是函数”]相关的知识,希望对你有一定的参考价值。

我正在研究CRUD应用程序,并且通过API获取数据,除我尝试删除项目外,其他所有东西都在工作。如果我单击按钮,它将返回错误:

调度不是函数。

ADDUPDATE操作代替DELETE正常工作。如果您想浏览该项目并给我反馈,请联系我们在Github上可用。

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);
答案

反应功能组件are函数,但是它们仅接收一个参数props对象。 react-reduxconnect HOC注入dispatch属性,并将statedispatch映射到props

访问props对象

const Return = (props) => {
  ...
  props.dispatch(...some action object);
  ...

或在函数签名中分解

const Return = ({ booknum, dispatch, getRented, id, <... other props> }) => {
  ...
  dispatch(...some action object);
  ...

以上是关于[我正在尝试删除一个项目,但是每次我单击按钮时,它都会返回错误“调度不是函数”]的主要内容,如果未能解决你的问题,请参考以下文章

如何知道单击按钮的列表项的索引

每次单击按钮时如何删除数组中的对象?

当用户单击按钮时从数组中删除对象

className.remove 不工作。单击按钮时尝试删除活动

单击检查按钮时如何删除/删除按钮文本?

根据父 vue 中单击事件的索引删除输入