Reactjs 组件将接收不发射的道具，即使道具值已更新

在一个简单的场景中，我更新了父组件中的一个值，该值传递给子组件，并期望触发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>
    )
  }
}

@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>

类应用程序扩展组件{
changeProps（）{//解释器跳到这里很好。。
调试器
this.appState.index=15//update props值
}
render（）{
返回(
)
}
}

子组件：

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>
    )
  }
}

@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>

@observer
导出默认类EasyABC扩展组件{
建造师（道具）{
超级（道具）
}
componentWillReceiveProps（nextProps）{//为什么在父级中更新props后不在此处跳转？
调试器
}
playSound（）{//调用此方法时，是否应该调用上面的cWRP？
this.props.parentUpdateProps（）
}
render（）{
返回(
this.playSound（）}>再次播放声音

---

Edited：我正在使用mobx作为状态处理程序，但不必为此费心您错误地更新了

状态。您必须使用
setState
例如

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

您需要使用setState更新组件的状态，并使用setState将其传递给子组件


类应用程序扩展组件{
构造函数（）{
此.state={
索引：0，
};
this.changeProps=this.changeProps.bind（this）；
}
changeProps（）{
这是我的国家({
索引：15，
});
//这将更新状态（不是道具）
}
render（）{
返回(
);
}
}
您必须在渲染函数中取消对可观察值的引用，否则它将不会触发will receive道具，因为组件实际上没有使用它进行渲染

你可以这样做：

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

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

render（）{
if（this.props.appState.index）{
再次播放声音；
}
返回播放声音；
}

实际上，如何使用它并不重要，而是在render方法的调用堆栈中访问它