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

子组件：

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

已编辑：我正在使用 mobx 作为状态处理程序，但不要理会它

Answer 1

您正在错误地更新state。你必须使用setState例如

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您必须取消引用渲染函数中的可观察值，否则它将不会触发将接收道具，因为该组件实际上并未使用它来渲染。

你可以这样做：

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

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

如何使用它并不重要，但是你在render方法的调用堆栈中访问它。

componentWillReceiveProps甚至没有触发道具值更新

3 个答案: