Question

我在组件状态下编写一些通过componentWillReceiveProps（）中的nextProps接收的值时遇到问题。

这是我目前的代码：

componentWillReceiveProps(nextProps){
    console.log("REV")
    console.log(nextProps)
    const dateFrom = nextProps.requestDateFrom;
    if(nextProps.requestDateFrom != 'undefined'){
        this.setState({
            dateFrom: dateFrom,
            dateTo: nextProps.requestDateTo
        });

        //console.log(nextProps.requestDateFrom)
        this.calculateDays();
    }

}

calculateDays(){
    console.log("clas")
    console.log(this.state.dateFrom)

}

我不明白为什么会这样，因为数据在nextProps中，而dateFrom中的componentWillReceiveProps()也填充了calculateDays()。但是当我尝试在j > i中访问它们时，状态为空。

当然，我可以将值作为参数传递给函数，但是更喜欢将它们放在状态中，所以我可以用其他方法访问它们。

我在这里缺少什么？

由于

Answer 1

我认为您应该阅读有关反应生命周期Component Specs and Lifecycle

的更多信息

在componentWillReceiveProps中调用this.setState（）不会触发额外的渲染。

您可以运行下面的代码，看看它是如何工作的。

很高兴！

＆＃13;

class Hello extends React.Component {
  constructor(props) {
    super()
    this.state = {
      count: 0
      }
  }
  componentWillReceiveProps (nextProps ) {
    console.log(nextProps)
    
    this.setState({
      count: this.state.count ++ 
    })
    console.log('componentWillReceiveProps: ' + this.state.count) 
    // componentWillReceiveProps: 1
    // Calling this.setState() within this function will not trigger an additional render.
  }

  render() {
    console.log(this.state.count) // still 0
    return (
      <h1>{this.props.content}, {this.state.count}</h1>
    )
  }
}

class Outer extends React.Component {
  constructor(props) {
    super()
    this.handler = this.handler.bind(this)
    this.state = {
      content: 'Hello, world! '
    }
  }
  handler() {
    this.setState({
      content: 'Hello Component\'s Props had Changed! '
      })
  }
  render() {
    return (
      <div>
        <Hello {...this.state} />
        <a onClick={this.handler}>change the Hello </a>
      </div>
    )
  }
}


ReactDOM.render(
  <Outer />,
  document.getElementById('root')
);

＆＃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>


<div id='root'>
</div>

＆＃13;

Answer 2

您应该使用新的生命周期挂钩getDerivedStateFromProps()根据道具塑造新状态。然后，您可以在calculateDays挂接中调用componentDidUpdate()。例如：

static getDerivedStateFromProps(props, state) {
    const dateFrom = props.requestDateFrom;
    if(props.requestDateFrom != 'undefined'){
        return {
            dateFrom: dateFrom,
            dateTo: props.requestDateTo
        };
     }
     return null;
}

componentDidUpdate() {
    this.calculateDays();
}

无法在componentWillReceiveProps中写入状态

2 个答案: