がエラーに反応：のみ

Question

は私が書くマウントまたはマウント部品の時間カウントダウンコンポーネント更新することができます。

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

私にはわからない私に言いました私のコードで何が問題なのですか

Answer 1

CountDownコンポーネントが1000ms以内にマウントされ、アンマウントされる可能性があります。 CountDown部品が実装され

、setStateは（componentDidMountから）1000ミリ秒後に呼び出されるようにスケジュールされている（CountDownがレンダリングされるコンポーネントを確認してください）。コンポーネントが1000ms前にアンマウントされている可能性があります。 setStateメソッドが1000ms後に呼び出されると、コンポーネントは既にアンマウントされているため、警告が表示されます。

コンポーネントがアンマウントされた後に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を使用する場合があります。