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

我试图在React+Redux中运行以下代码，但遇到了未处理的错误

异常“NodeInvocationException:无法读取的属性“showText” null TypeError:无法读取null的属性“showText”

import*as React from'React'；
从“/NavMenu”导入{NavMenu}；
从“react”导入{Component}；
导出接口闪烁状态
{
showText：布尔型；
案文：''；
}
类型BlinkProps=BlinkState；
类。组件{
构造器（道具：闪烁道具）{
超级（道具）；
//this.state={showText:true}；
this.setState（{showText:true，text:props.text}）；
//每秒钟切换一次状态
设置间隔（（）=>{
this.setState（previousState=>{
返回{showText:！previousState.showText}；
});
}, 1000);
}
render（）{
let display=this.state.showText？this.props.text:“”；
返回{display}；
}
}
导出类布局扩展React.Component{
公共渲染（）{
返回
;
}
}

---

我只是想弄清楚如何使用传入的道具来渲染眨眼效果…

你错过了最基本的东西，使用

构造函数和
设置状态
，使用
构造函数
是初始化状态值，使用
设置状态
是更新状态值，所以在构造函数内部使用
setState
没有任何意义

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

按如下方式编写组件：

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.Component{
构造器（道具：闪烁道具）{
超级（道具）；
this.state={showText:false}；
}
componentDidMount（）{
this.timer=setInterval（（）=>{
this.setState（previousState=>{
返回{showText:！previousState.showText}；
});
}, 1000);
}
组件将卸载（）{
clearInterval（这个.timer）
}
render（）{
let display=this.state.showText？this.props.text:“”；
返回{display}；
}
}

工作代码：


class.Component{
建造师（道具）{
超级（道具）；
this.state={showText:true，text:props.text}；
}
componentDidMount（）{
this.timer=setInterval（（）=>{
this.setState（prev=>{
返回{showText:！prev.showText}；
});
}, 1000);
}
组件将卸载（）{
clearTimer（this.timer）
}
render（）{
let display=this.state.showText？this.props.text:“”；
返回Hello{display}；
}
}
类布局扩展了React.Component{
render（）{
返回
;
}
}
ReactDOM.render（，document.getElementById（'app'））
您不应该在
构造函数中指定要执行的操作，也不应该使用
设置状态
在那里，
构造函数
应该用于简单地设置初始状态

此外，您可能需要更新
状态文本
，因为它是基于道具设置的。在组件willreceiveprops中执行此操作

另外，当您使用
setInterval
时，确保
组件卸载时
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)
}

啊，好吧，我明白了，我还在学习它是如何工作的。我会记住使用构造函数来设置初始状态，如您所示。不幸的是，这并不能解决我的问题，因为布局上的渲染无法工作：（我希望能够做到这一点：但当我将其放入布局组件的渲染函数中时，我得到了一个错误（请参见我的问题）啊，不，我正试图通过我的布局组件渲染功能来渲染Blink组件…几乎相同，只是您需要从父级传递props值，等待将编辑答案：）啊，是的，看起来我必须将VS中的typescript更新到2.5，并且一切都已就绪。啊，好的，感谢您提供有关如何正确设置组件的提示，我还在学习，犯错误还有很大的余地，呵呵。不幸的是，我仍然无法确定如何在不出错的情况下使用组件like（请参见我的问题）。当我尝试得到错误“TS（键入“{showText:ture；text:“World”}时，布尔值showText应该传递给组件like
）'不可分配给类型'InstrinsicAttribute&IntrinsicClassAttributes&Readonly&Rea…属性'text'的类型不兼容类型'World'不可分配给类型'''
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)
}