构造函数中的 setState 无法正常工作：ReactJS

Question

我正在尝试在 React+Redux 中运行以下代码，但遇到了未处理的问题

异常“NodeInvocationException：无法读取 null 的属性“showText” TypeError：无法读取 null 的属性“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>;
    }
}

我只是想弄清楚如何使用传入的道具渲染 Blink copmonent ......

Answer 1

你错过了基本的东西，使用 constructor and setState，use of constructor 是初始化状态值，use ofsetState是更新状态值，所以setState在 `constructor 内部使用没有任何意义。

更好的方法是，在构造函数中初始化状态并使用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<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'))