Question

我的应用程序中有这个组件。这基本上是每秒更新一次状态。但是值<p>{this.state.time}</p>不变。我打印每秒改变的状态值。

import React from 'react'

import './style.css'

class List extends React.Component{

    constructor(props){
        super(props)

        this.state = {
            time:420
        }
        this.handleCountdown = this.handleCountdown.bind(this)
    }

    handleCountdown(){
        console.log('4')
        console.log(this.state)
        setInterval(()=>{
            this.setState({time:this.state.time-1})
            console.log('here')
            console.log(this.state)
        },1000)
    }

    shouldComponentUpdate(nextProps, nextState){
        console.log('1')
        if(this.props.start != nextProps.start){
            console.log('in')
            if(nextProps.start == false){
                this.setState({time:420})
                console.log('2')
                return true
            }
            else if(nextProps.start == true){
                this.handleCountdown()
                console.log('3')
                return true
            }
        }else{
            return false
        }
    }

    render(){
        {console.log(this.state)}                                               
        return(
            <div className="test-clock">
                <p>{this.state.time}</p>
                <p className='test-clock-subheading'>{this.props.start=='true'?'Min remaining':'Start sudo contest'}</p>
            </div>
        )
    }
}

export default List

它是子组件。我将其导入父级，然后使用它。谁能说出为什么DOM不更新？

this.forceUpdate（）将更新DOM。但是为什么this.setState（）不是正在更新DOM？

Answer 1

您还需要检查状态是否已更改。将以下内容添加到您的shouldComponentUpdate方法中。

}
else if ( this.state.time !== nextState.time {
  return true;
}

如documentation中所述：

使用shouldComponentUpdate()让React知道组件的输出是否不受状态或道具当前更改的影响。

setState没有更新DOM

1 个答案: