React組件僅在第二個onClick事件上更改狀態

Question

我有這兩個簡化的 React組件，其中Times組件是Create組件的子組件（請參閱下面的代碼示例）。 預期的行為是，最初， Times組件未顯示，但當用戶使用onClick單擊鏈接時，將顯示Times組件。

這些組件大部分都按預期工作，但奇怪的是，在第一次單擊onClick鏈接后， Times組件不會出現，並且Create組件根本不會改變狀態，如控制台中所示。 但是，當第二次單擊鏈接時， Create組件會更改狀態並重新呈現，並且可以看到Times組件。

Create.jsx

import React from 'react';
import Times from './Times.jsx';

export default React.createClass({

  getInitialState: function () {
    return {times: false};
  },

  _change: function () {
    this.replaceState({times: true});
    console.log(this.state.times);
  },

  render: function () {
    return (
      <div id="create">
        <div id="outerbox">
          <a onClick={this._change}>Times</a>
          <Times shouldShow={this.state.times}/>
        </div>
      </div>
    );
  }
});

Times.jsx

import React from 'react';

export default React.createClass({

  propTypes: {
    shouldShow: React.PropTypes.bool.isRequired
  },

  getDefaultProps: function () {
    return {shouldShow: false};
  },

  getInitialState: function () {
    return {el: 'times'};
  },

  componentDidMount: function() {
    if (this.props.shouldShow === false) {
      this.setState({display: 'none'});
    } else {
      this.setState({display: 'block'});
    }
  },

  componentWillReceiveProps: function() {
    if (this.props.shouldShow === false) {
      this.setState({display: 'none'});
    } else {
      this.setState({display: 'block'});
    }
  },

  render: function () {
    return (
      <div id={this.state.el} style={{"display": this.state.display}}>
        <h1>Times</h1>
      </div>
    );
  }
});

console.log的輸出

false
true

為什么第一次點擊時沒有注冊Create組件的狀態？

Answer 1

問題出在這里。

 componentWillReceiveProps: function() {
    if (this.props.shouldShow === false) {
      this.setState({display: 'none'});
    } else {
      this.setState({display: 'block'});
    }
  }

應該是哪個，

 componentWillReceiveProps: function(newProps) {
    if (newProps.shouldShow === false) {
      this.setState({display: 'none'});
    } else {
      this.setState({display: 'block'});
    }
  }

ComponentWillRecieveProps是組件類的成員函數，在“應用”props之前調用它。 這意味着this.props是舊的道具。 您應該使用作為參數提供給函數的newProps 。

http://codepen.io/bhargav175/pen/gaJmKz

---

而且，我覺得你使用的狀態比你需要的多一點。 您根本不需要顯示器作為狀態變量。 時間是一個內在的組成部分，因此盡可能多地使用道具並使它們成為無狀態是有意義的。

關於“道具變化不影響渲染，所以讓我們使用狀態”存在一種常見的誤解。 道具也會在重新渲染中改變結果，所以除非有充分的理由並且你真的需要使內部組件變得聰明，否則總是使用道具。 在內部組件中使用道具，使它們變得愚蠢且易於使用。

http://codepen.io/bhargav175/pen/WQBpzP

   var Times = React.createClass({

  propTypes: {
    shouldShow: React.PropTypes.bool.isRequired
  },

  getDefaultProps: function () {
    return {shouldShow: false};
  },

  getInitialState: function () {
    return {el: 'times'};
  },



  render: function () {
    let display = this.props.shouldShow ? "block" : "none";
    return (
      <div id={this.state.el} style={{"display": display}}>
        <h1>Times</h1>
      </div>
    );
  }
});