• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

阵营错误:只能更新一安装或安装组件

reactjs 来源:hh54188 6次浏览

我写了一个时间倒计时组件:阵营错误:只能更新一安装或安装组件

class CountDown extends React.Component { 
    constructor(props) { 
    super(props) 
    const {target} = this.props 
    this.state = { 
     target, 
    } 
    } 
    componentDidMount() { 
    const {target} = this.state 
    if (target) { 
     setTimeout(() => { 
     this.setState({ 
      target: target - 1, 
     }) 
     }, 1000) 
    } 
    } 
    render() { 
    const {target} = this.state 
    return <span>{target}</span> 
    } 
} 

时运行它,在开发控制台告诉我

setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the CountDown component.`

我不知道我的代码有什么问题


===========解决方案如下:

机会是CountDown组件在1000毫秒内安装和卸载。 (检查部件,其中CountDown呈现)

CountDown部件被安装时,setState定1000毫秒之后被调用(从componentDidMount)。该组件可能在1000毫秒之前被卸载。当在1000ms之后调用setState方法时,该组件已经被卸载并因此发出警告。

为了防止setTimeout在卸载组件后被调用,请在卸载之前调用clearTimeout。 (停止警告消息)

class CountDown extends React.Component { 
    constructor(props) { 
    super(props) 
    const {target} = this.props 
    this.state = { 
     target, 
    } 
    } 

    componentDidMount() { 
    const {target} = this.state 
    if (target) { 
     this.timer = setTimeout(() => { 
     this.setState({ 
      target: target - 1, 
     }) 
     }, 1000) 
    } 
    } 

    componentWillUnmount() { 
    if (this.timer) clearTimeout(this.timer) 
    } 

    render() { 
    const {target} = this.state 
    return <span>{target}</span> 
    } 
} 

PS:您可能需要使用setInterval而不是setTimeout如果你想保持在该评论中所指出倒计时。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)