componentWillReceivePropsが小道具の値を更新しない

Question

単純なシナリオがあります。子コンポーネントに渡された親の値と予想されるcWRPメソッドの起動が更新されました。ここでは以下のコードです。

親コンポーネント：

class App extends Component { 
    changeProps(){//interpreter jumps here fine.. 
    debugger 
    this.appState.index=15 //update props value 
    } 
    render() { 
    return (
     <div className="App"> 
     <EasyABC parentUpdateProps={this.changeProps} appState={this.props.appState} /> 
     </div> 
    ) 
    } 
} 

子コンポーネント：私は状態ハンドラとしてmobx使用していますが、あなたが更新している

Answer 1

あなたがSETSTATEを使用してコンポーネントの状態を更新し、子コンポーネントに渡すために同じを使用する必要が

class App extends Component { 
 
    constructor() { 
 
    this.state = { 
 
     index: 0, 
 
    }; 
 
    this.changeProps = this.changeProps.bind(this); 
 
    } 
 

 
    changeProps(){ 
 
    this.setState({ 
 
     index: 15, 
 
    }); 
 
    // this will update state (not props) 
 
    } 
 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <EasyABC 
 
      parentUpdateProps={this.changeProps} 
 
      appState={...this.state} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

それを気にしていけない：

@observer 
export default class EasyABC extends Component{ 
    constructor(props){ 
     super(props) 
    } 
    componentWillReceiveProps(nextProps){//why its not jump here after update props in parent? 
     debugger 
    } 
    playSound(){// when this method called, cWRP above should be invoked rigth? 
     this.props.parentUpdateProps() 
    } 

render(){ 
     return(
      <div> 
       <a onClick={()=> this.playSound()}>Play Sound Again</a> 

が編集stateが間違っています。 setStateなどを使用する必要があります。

changeProps() { 
    this.setState({ 
     index: 15 
    }); 
} 

Answer 3

あなたはで観察値を間接参照する必要がありますコンポーネントが実際にレンダーするために使用されていないため、プロップを受け取ることはありません。

あなたはちょうどこのような何かを行うことができます：

render() { 
    if (this.props.appState.index) { 
    return <div>Play Sound Again</div>; 
    } 

    return <div>Play Sound</div>; 
} 

本当にあなたがそれをどのように使用するかは問題ではなく、あなたがrenderメソッドの呼び出しスタック内にアクセスしていることはありません。