this.setState不是函数ReactJS

时间:2017-04-30 19:31:50

标签: reactjs

我试图在反应JS中开发一个简单的Dialog组件。我做了一些非常相似的事情,之前效果很好:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { GridLoader as Loader } from 'halogen';
import httpCodes from 'http-status-codes';
import { Carousel } from 'react-responsive-carousel';

import 'react-responsive-carousel/lib/styles/carousel.css';

const NO_ELEMENT_SIZE = 0;
const TRANSITION_INTERVAL = 10000;

export default class MyCarousel extends Component {

    constructor(props) {
        super(props);

        this.state = {};
    }

    componentDidMount() {
        this.componentIsMounted = true;
        this.fetchMedia();
    }

    componentWillUnmount() {
        this.componentIsMounted = false;
    }

    fetchMedia() {
        fetch(this.props.url, {
            headers: { 'Content-Type': 'application/json' },
            method: 'GET'
        }).
        then((response) => {
            if (response.status >= httpCodes.BAD_REQUEST ||
                response.status === httpCodes.NO_CONTENT) {
                return Promise.reject(new Error(response.statusText));
            }

            return response.json();
        }).
        then((response) => {
            if (!this.componentIsMounted) {
                return;
            }

            const media = this.getMedia(response);
            this.setState({ media });
        });
    }

    getMedia(media) {
        const mediaList = [];
        let key = 0;
        media.forEach((mediaEntry) => {
            if (mediaEntry.type === 'image;imagem') {
                mediaList.push(<div key={key++}>
                    <img src={mediaEntry.url} />
                </div>);
            } else if (mediaEntry.type === 'video;vídeo') {
                mediaList.push(<div key={key++}>
                    <iframe src={mediaEntry.url} />
                </div>);
            }
        });

        return mediaList;
    }

    render() {
        if (!this.state.media) {
            return (
                <div className="hor-align vert-align">
                    <Loader color="#012935" className="loader"/>
                </div>
            );
        }

        if (this.state.media.length === NO_ELEMENT_SIZE) {
            return null;
        }

        return (
            <Carousel useKeyboardArrows autoPlay infiniteLoop
                      showArrows showThumbs={ false } showStatus={ false }
                      interval={TRANSITION_INTERVAL}>
                {this.state.media}
            </Carousel>
        );
    }
}

MyCarousel.propTypes = { url: PropTypes.string.isRequired };

所以,我对我的Dialog组件做了完全相同的操作,但我一直收到错误:this.setState is not a function。为什么一个有效,另一个无效?

import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import PropTypes from 'prop-types';

export default class MyDialog extends Component {

    constructor(props) {
        super(props);

        this.state = { open: false };
    }

    handleOpen() {
        this.setState({ open: true });
    }

    handleClose() {
        this.setState({ open: false });
    }

    render() {
        const actions = [
            <FlatButton
                label="Cancel"
                primary
                onTouchTap={this.handleClose}
            />,
            <FlatButton
                label="Submit"
                primary
                keyboardFocused
                onTouchTap={this.handleClose}
            />
        ];

        return (
            <div>
                <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
                <Dialog
                    title="Dialog With Actions"
                    actions={actions}
                    modal={false}
                    open={this.state.open}
                    onRequestClose={this.handleClose}
                >
                    <TextField hintText="Hint Text"
                               />
                </Dialog>
            </div>
        );
    }
}

MyDialog.propTypes = {
    open: PropTypes.bool.isRequired,
    poiId: PropTypes.string,
    url: PropTypes.string.isRequired,
    user: PropTypes.any
};

最后,我称之为 MyDialog 组件的组件。

知道什么是错的吗?

亲切的问候

0 个答案:

没有答案