未捕获的TypeError:this.updater.enqueueCallback不是函数

时间:2017-11-04 14:40:19

标签: javascript reactjs materialize

处理表格时遇到很大问题 Screen from Console

这是我的代码:

import React, { Component } from 'react';
import './BookRoomForm.css';
import { Row, Col, Input } from 'react-materialize';

class BookRoomForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            date: '',
            location: '',
            duration: '',
            charis: '',

        };
    }// end constructor

    handleSubmit = (event) => {
        event.preventDefault();
        alert('Form has been Submitted!');
    }//end handleSubmit

    handleChange = (event) => { 
        console.log('inside handleChange');
        this.setState({location: event.target.value}); 
        console.log(this.state.location);
    }//end handleChange


    render () {
        return (
            <div>
                <Row>
                    <Col className='Room-forms' s={12} m={12} l={12}>
                        <form onSubmit={this.handleSubmit}>
                            <Input s={12} m={6} l={3} name='dateField' type='date' label='Meeting Date' value={this.state.date} />
                            <Input s={12} m={6} l={3} name='locationField' type='select' label='Room Location' value={this.state.location} onChange={this.handleChange} >
                                <option value='London'>London</option>
                                <option value='Paris'>Paris</option>
                            </Input>
                            <Input s={12} m={6} l={3} type='select' label='Duration in Hours' value={this.state.duration}>
                                <option value='0.5'>0.5</option>
                                <option value='1'>1</option>
                                <option value='1.5'>1.5</option>
                                <option value='2'>2</option>
                                <option value='2.5'>2.5</option>
                                <option value='3'>3</option>
                                <option value='3.5'>3.5</option>
                                <option value='4'>4</option>
                                <option value='4.5'>4.5</option>
                                <option value='5'>5</option>
                                <option value='5.5'>5.5</option>
                                <option value='6'>6</option>
                                <option value='6.6'>6.5</option>
                                <option value='7'>7</option>
                                <option value='7.5'>7.5</option>
                                <option value='8'>8</option>
                            </Input>
                            <Input s={12} m={6} l={3} type='select' label='Number of Chairs' value={this.state.charis} >
                                <option value='5'>5</option>
                                <option value='10'>10</option>
                                <option value='15'>15</option>
                            </Input>
                            <Row>
                                <Input s={12} m={12} l={12} className='full-submit-button btn waves-effect waves-light' type='submit'></Input>
                            </Row>
                        </form>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default BookRoomForm;

我检查了我的React和React-DOM版本(16.0.0),我删除了所有node_modules,然后通过package.json list(最新版本)安装它们。 实际上我在其他组件中使用setState方法:

componentDidMount() {
        fetch('http://127.0.0.1:8000/meetings/?owner=1')
        .then(results => {
            return results.json();
        }).then(data => {
            let reservations = data.map(data => {
                return (
                    <div key={data.url}>
                        <Row key={data.url} className='meeting-box'>
                            <Row className='meeting-title'>{data.title}</Row>
                            <Row>
                            <Col s={12} m={12} l={3} className='meeting-details'>
                                <Icon small className='meeting-icon'>event</Icon> {data.date}
                            </Col>

                            <Col s={12} m={12} l={3} className='meeting-details'>
                                <Icon small className='meeting-icon'>schedule</Icon> {data.start_time} - {data.end_time}
                            </Col>

                            <Col s={12} m={12} l={3} className='meeting-details'>
                                <Icon small className='meeting-icon'>event_seat</Icon> {data.room.name} in {data.room.location}
                            </Col>

                            <Col s={12} m={12} l={3} className='meeting-details'>
                                <div className ='button-space'><Button className='meeting-remove-button' waves='light'>X</Button></div>
                                <div className ='button-space'> <Button className='meeting-activate-button' waves='light'>CODE</Button></div>
                            </Col>
                            <Row  >
                                <Col s={12} m={12} l={12} className='meeting-members'>
                                    <Icon small className='meeting-icon'>vpn_key</Icon> TO GET THE CODE HERE CLICK BUTTON "CODE"
                                </Col>
                            </Row>
                            </Row>
                        </Row>
                    </div>
                )
            })
            this.setState({reservations: reservations});
        })
    }

并且一切都很好。

我想知道我是否应该爆炸这个项目并从材料-ui开始。也许有人有解决这个问题的方法?

0 个答案:

没有答案