陣營錯誤：只能更新一安裝或安裝組件

我寫了一個時間倒計時組件：陣營錯誤：只能更新一安裝或安裝組件

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.`

我不知道我的代碼有什麼問題

來源

2017-12-18 hh54188

是你所有的代碼嗎？你如何渲染它？ – Li357

@ Li357'' – hh54188

這不是在這個代碼塊 - 這是一個[工作代碼沙箱]（https://codesandbox.io/s/q7885xzxv4）。注意：如果你想讓它繼續減計數，你可能想使用'setInterval'而不是'setTimeout'。當<1時，可能是clearInterval的一個條件。 –

機會是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如果你想保持在該評論中所指出倒計時。

來源

2017-12-18 09:26:16 Bless

陣營錯誤：只能更新一安裝或安裝組件

回答

相關問題