通过componentDidMount

Question

我有一个问题，但是我找不到原因，我认为这与我缺乏反应的经验有关，让我们开始吧。安装组件时，将调用componentDIdMount并插入道具的状态，但是当我刷新页面（f5）时，单位和时区状态不会收到didMount的值，但是状态测试会收到其值，即好像this.pros在componentDidMount中不存在，但是它在组件上。

  

渲染组件时。

  

刷新到页面（f5）时。

我看到在刷新中调用了componentDidMount，因为测试已插入状态，但是this.props不是。有人将光线指向隧道的尽头吗？

  

我的组件。

import React, {Component} from 'react'
import { connect } from 'react-redux';
import ActionsCreators from '../../redux/actions/actionsCreators'

class MyAccount extends Component{ 
    constructor(props){
        super(props)
        this.state = {
            unit: '',
            timezone: '',
            test:''
        }
    }   
    componentDidMount(){
        this.setState({
            unit: this.props.auth.user.unit,
            timezone: this.props.auth.user.timezone,
            test:'test'
        })
    }
    render(){ 
        return(
            <div>
                <h1>MyAccount</h1>
                <span>state {JSON.stringify(this.state)}</span>              

                <br/>
                <span>props unit:{JSON.stringify(this.props.auth.user.unit)} </span>
                <br />
                <span>props timezone:{JSON.stringify(this.props.auth.user.timezone)} </span>           
            </div>             
        )
    }
} 
const mapStateToProps = state => {
    return {
        auth: state.auth
    }
}
const mapDispatchToProps = dispatch => {
    return{
        updateProfile: (user) => dispatch(ActionsCreators.updateProfileRequest(user))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(MyAccount)

Answer 1

您可以使用shouldComponentUpdate来跟踪道具的变化并相应地更新状态

shouldComponentUpdate(nextProps, nextState) {
 return (nextProps.auth !== this.props.auth ||
         nextState.unit !== this.state.unit ||
         nextState.timezone !== this.state.timezome);
}

componentDidUpdate(prevProps) {
  if (prevProps.auth !== this.props.auth) {
    this.setState({
      unit: this.props.auth.user.unit,
      timezone: this.props.auth.user.timezone
    });
  }
}

这样，如果道具在componentDidMount状态之后到达，则会进行更新

Answer 2

我的猜测是，当刷新页面时，组件会在之前挂载。您的redux状态正在填充。因此，当componentDidMount触发时，redux中没有任何内容，因此道具没有。当redux最终填充时，它会重新渲染，从而使道具出现在组件中。我建议您看一下getDerivedStateFromProps（它代替了React 16.3中的旧componentWillReceiveProps生命周期事件）。每当有新的道具出现时，您都可以使用它来设置状态。在组件中放置类似这样的内容应该可以：

static getDerivedStateFromProps(nextProps, prevState){
  if(nextProps.someValue!==prevState.someValue){
    return { someState: nextProps.someValue};
  }
  else return null;
}

此示例摘自this article，我发现它是这个新的react事件如何工作的很好的入门书。

Answer 3

希望它有用，请尝试...

import _isEqual from 'lodash/isEqual';


componentWillReceiveProps(nextProps) {

if(!_isEqual(this.props.auth.user, nextProps.auth.user)){
this.setState({
            unit: this.props.auth.user.unit,
            timezone: this.props.auth.user.timezone,
            test:'test'
        })
}
}