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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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如果你想保持在该评论中所指出倒计时。

以上是 阵营错误：只能更新一安装或安装组件 的全部内容， 来源链接： utcz.com/qa/260593.html

回到顶部