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类扩展React.Component。我试图在更新方法中使用状态更改重新呈现Leader组件。它会改变状态，但不会改变传递给Leader的属性来重新渲染。

Answer 1

在初始渲染后，您在Leader内没有使用道具m执行任何操作。所以，它正在重新渲染，但它的状态并没有改变。请注意，constructor仅在初始render之前调用一次。因此，如果您希望Leader在初始render之后回复道具更改并相应更新其状态，则需要使用其中一个component lifecycle methods。

我建议您在Leader组件中添加componentWillReceiveProps lifecycle method。这应该这样做：

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

测试组件内部正在发生的事情的任何简单方法是只添加console.log(this.props, this.state);作为组件render的第一行。

ReactJS为什么这个状态改变不呈现？我究竟做错了什么？

1 个答案: