状態値が更新されていません

Question

class RaisablePaper extends Component { 
     constructor(props) { 
      super(); 
      this.state = { 
       state1: "state1", 
       openNow: props.boxOpen, 

      }; 
     } 
} 

<RaisablePaper boxOpen={this.state.dOpen}/>を実行してこのクラスに値を送信しようとしています。しかし、dOpenが変更されたときはいつでも、openNowを更新していないようです。ヘルプは非常に感謝しています。

Answer 1

constructorにコンポーネントをマウントする前に状態を設定しています。これは、小道具の交換時に再起動されません。そのために、ReactのcomponentWillReceivePropsを使用することができます。これは、新しい小道具がコンポーネントに送信されたときに呼び出されます。

class RaisablePaper extends Component { 
    constructor(props) { 
    super(); 
    this.state = { 
     state1: "state1", 
     openNow: props.boxOpen 
    }; 
    } 
    componentWillReceiveProps(props) { 
    this.setState({ 
     openNow: props.boxOpen 
    }); 
    } 
} 

Answer 2

あなたの状態に同期することを心配するのではなく、直接小道具を使用する方が簡単です。可能な限り多くの小道具に頼ることは、一般的には良い考えです。そして、絶対に必要なときには、州だけを関与させてください。

Fabian Schultzは正しいです。コンストラクタはコンポーネントがマウントされる前に一度しか実行されないため、コンポーネントが構築中に初期化された状態に依存している場合は、

---

私はちょうどboxOpen状態を使用して例を示していると想像しています。あなたはあなたのrenderメソッドが何をしているのと同じ一般的なアイデアを続けることができます。

class RaisablePaper extends Component { 
    render() { 
    return (
     <div className={this.props.boxOpen ? 'is-open' : ''}> 
     Here's some content... 
     </div> 
    ); 
    } 
}