Проблема установки состояния через реквизит в componentDidMount - PullRequest
Новая
       7

Проблема установки состояния через реквизит в componentDidMount

0 голосов
/ 12 декабря 2018

У меня есть проблема, но я не мог выяснить, в чем причина, я думаю, это связано с моим отсутствием опыта реагирования, ну что ж, поехали.Когда компонент монтируется, вызывается componentDIdMount и вставляется состояние реквизита, но когда я обновляю страницу (f5), состояния модуля и часового пояса не получают значение didMount, но тест состояния получает свое значение, этокак будто this.pros не существует в componentDidMount, но он находится на компоненте.

Когда компонент визуализируется.

enter image description here

При обновлении на страницу (f5).

enter image description here

Я вижу, что 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)

Ответы [ 3 ]

0 голосов
/ 12 декабря 2018

Вы можете использовать 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, состояние будет обновлено

0 голосов
/ 13 декабря 2018

Надеюсь, это полезно, Попробуйте это ... 

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'
        })
}
}
0 голосов
/ 12 декабря 2018

Я предполагаю, что когда вы обновляете страницу, ваш компонент монтируется до , когда ваше состояние избыточности заполняется. Таким образом, когда срабатывает componentDidMount, в избыточном ничего нет, поэтому реквизиты равны нулю.Когда, наконец, заполняется избыточность, она перерисовывается, в результате чего в компоненте появляются реквизиты.Я бы рекомендовал взглянуть на getDerivedStateFromProps (который заменил старое событие жизненного цикла componentWillReceiveProps в React 16.3).Вы можете использовать это, чтобы установить состояние всякий раз, когда появляются новые реквизиты. Отбрасывание чего-то подобного в вашем компоненте должно работать: 

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

Этот пример был взят из этой статьи , которую янайден хороший пример того, как работает это новое событие реакции.

...