无法写入componentWillReceiveProps中的状态

我有问题需要编写组件状态下componentWillReceiveProps（）中的nextProps接收到的一些值。无法写入componentWillReceiveProps中的状态

这是我当前的代码：

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()中访问它们时，状态为空。

当然，我可以将值作为参数传递给函数，但宁愿让它们处于状态，所以我可以用其他方法访问它们。

我在这里错过了什么？

感谢

来源

2016-07-07 BayLife

https://facebook.github.io/react/docs/component-api.html#setstate _setState（）不会立即发生变异this.state_ –

使用''身边代码，而不是“'来格式化代码。 – yash

@BayLife你可以把你的逻辑放入'render'函数吗？这至少可以确保正确性，以防国家从未按时更新。 – activatedgeek

我想你应该阅读更多关于componentWillReceiveProps内反应的生命周期Component Specs and Lifecycle

调用this.setState（）不会引发额外的渲染。

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

很高兴！

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

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

来源

2016-07-07 12:04:48

无法写入componentWillReceiveProps中的状态

回答

相关问题