构造函数中的setState不能正常工作: ReactJS

Question

我试图在React+Redux中运行下面的代码，但是遇到了一个未处理的

异常'NodeInvocationException:不能读取属性'showText‘的空TypeError:不能读取属性'showText’的空‘

import * as React from 'react';
import { NavMenu } from './NavMenu';

import { Component } from 'react';

export interface BlinkState
{
    showText: boolean;
    text: '';
}

type BlinkProps = BlinkState;

class Blink extends React.Component<BlinkProps, BlinkState> {
    constructor(props: BlinkProps) {
        super(props);
        //this.state = { showText: true };

        this.setState({ showText: true, text: props.text });

        // Toggle the state every second
        setInterval(() => {
            this.setState(previousState => {
                return { showText: !previousState.showText };
            });
        }, 1000);
    }

    render() {
        let display = this.state.showText ? this.props.text : ' ';
        return <div>{ display }</div>;
    }
}


export class Layout extends React.Component<{}, {}> {
    public render() {
        return <div className='container-fluid'>
            <Blink showText=false text='I love to blink' />
        </div>;
    }
}

我只是想弄清楚如何把闪光灯和传递进来的道具联系起来.

Answer 1

您忽略了基本的东西，使用constructor和setState，使用constructor初始化状态值，使用setState更新状态值，因此在‘构造函数中使用setState是没有任何意义的。

更好的方法是，在构造函数中初始化状态，运行时间使用componentDidMount生命周期方法，也不要忘记在卸载组件之前停止时间，清除它使用componentWillUnmount生命周期方法。

编写如下组件：

class Blink extends React.Component<BlinkProps, BlinkState> {
    constructor(props: BlinkProps) {
        super(props);
        this.state = { showText: false };
    }

    componentDidMount(){
        this.timer = setInterval(() => {
            this.setState(previousState => {
                return { showText: !previousState.showText };
            });
        }, 1000);
    }

    componentWillUnmount(){
        clearInterval(this.timer)
    }

    render() {
        let display = this.state.showText ? this.props.text : ' ';
        return <div>{ display }</div>;
    }
}

工作代码：

​

class Blink extends React.Component {
    constructor(props) {
        super(props);
        this.state = { showText: true, text: props.text };
    }

    componentDidMount(){
        this.timer = setInterval(() => {
            this.setState(prev => {
                return { showText: !prev.showText };
            });
        }, 1000);
    }

    componentWillUnmount(){
        clearTimer(this.timer)
    }

    render() {
        let display = this.state.showText ? this.props.text : ' ';
        return <div>Hello { display }</div>;
    }
}

class Layout extends React.Component{
    render() {
        return <div className='container-fluid'>
            <Blink text='I love to blink' />
        </div>;
    }
}

ReactDOM.render(<Layout/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

​

Answer 2

您不应该指定要在constructor中执行的操作或在那里使用setState，应该使用constructor来简单地设置初始状态。

另外，您可能需要更新state text，因为它是基于道具设置的。在componentWillReceiveProps中这样做。

同样，在使用setInterval时，请确保在使用componentUnmounts时使用clearInterval

constructor(props: BlinkProps) {
        super(props);
        this.state = { showText: true, text: props.text };

    }
componentWillReceiveProps(nextProps) {
     this.setState({text: nextProps.text});
}
componentDidMount() {
      // Toggle the state every second
        this.interval = setInterval(() => {
            this.setState(previousState => {
                return { showText: !previousState.showText };
            });
        }, 1000);
}
componentWillUnmount() {
    clearInterval(this.interval)
}