ReactJS为什么这个状态变化不会呈现？我做错了什么？

Question

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

var mode=['recent', 'alltime'];

var Button = React.createClass({
  render(){
    return <input type={this.props.type} onClick=    {this.props.onClick} text={this.props.val}/>;
  }
});

class Header extends React.Component {
  constructor(){
    super()
  }

  render(){
    return <h2>Free Code Camp Leader board</h2>
  }
}

class Leader extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      users: [],
      val: props.m,
    }
  }

  componentDidMount() {
    var th =this;
    this.serverRequest = axios.get("https://fcctop100.herokuapp.com/api/fccusers/top/"+this.state.val).then(function(result){
      console.log(result.data);
      var leaders = result.data;
      this.setState({
        users: leaders
      });
    }.bind(this));
  }

  componentWillUnmount() {
    this.serverRequest.abort();
  }

  render(){
    return (
      <div className='container'>

        <div className="tbl">
          <table className="table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Recent </th>
                <th>Alltime</th>
              </tr>
            </thead>
            <tbody>
              {this.state.users.map(function(data, index){
                return (<tr key={index}><td><img src={data.img}    className="img img-thumbnail" width="50"/>{data.username}</td> 
                <td id='recent'>{data.recent}</td> 
                <td id='alltime'>{data.alltime}</td></tr>)
              })}
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}


class App extends React.Component{
  constructor(){
    super(),
    this.state={val: mode[0]},
    this.update= this.update.bind(this),
    this.unmount=this.unmount.bind(this)
  }

  unmount(){
    ReactDOM.unmountComponentAtNode(document.getElementById('board'))
  }

  update(){
    this.unmount();
    this.setState({val: this.state.val ===mode[0]? mode[1] : mode[0]});
  }

  render(){
    return (
      <div>
        <div className='header'>
          <Header />
          <button  onClick={this.update}  >{this.state.val==mode[0]? mode[1] : mode[0]}</button>
        </div>
        <div id="board">
          {this.state.val === mode[0]? <Leader m= {this.state.val} /> : this.state.val ===
            mode[1] ? <Leader m= {this.state.val} /> : null}
        </div>
      </div>
    );
  }
}

export default App;

有问题的部分在类App extends react.component下。我正在尝试用update方法中的状态更改重新呈现Leader组件。它会更改状态，但不会更改传递给Leader到Rerender的属性。

Answer 1

在leader中，在初始呈现后，您不会使用道具m执行任何操作。所以，它正在重新呈现，但它的状态没有改变。请记住，构造函数只在初始呈现之前调用一次。因此，如果希望leader在初始render之后响应适当的更改并相应地更新其状态，则需要使用组件生命周期方法之一。

我建议将ComponentWillReceiveProps生命周期方法添加到Leader组件中。这应该可以做到：

componentWillReceiveProps(nextProps) {
  this.setState({ val: nextProps.m });
}

测试组件内部发生的任何简单方法都是添加console.log（this.props,this.state）；作为组件render的第一行。