Как отобразить срез избыточного состояния в состояние локального компонента?

Question

В настоящее время я использую следующее:

const mapStateToProps = state => {
  return {
    stateInProps: state.someSliceIWant
  };
};

Foo.propTypes = {
  dispatch: PropTypes.func,
  stateInProps: PropTypes.object
};

export default connect(mapStateToProps)(Foo);

и поскольку мы можем на самом деле отображать состояние только на реквизиты, а не напрямую на состояние в моем компоненте, я хакерским способом обхожу это, выполнив следующее:

class Foo extends React.Component {

  constructor(props){
    super(props);

    this.state = {};

    setTimeout(() => {this.setState(this.props.stateInProps);},1);

  }

Как мне сделать это правильно? Я пытался использовать различные хуки жизненного цикла и все виды методов.

Интересная вещь, которую я обнаружил, заключалась в том, что если я поместил setState () в mapStateToProps .... это ПОЧТИ работает.

const mapStateToProps = state => {
  Foo.setState(state.someSliceIWant);
  return {
    stateInProps: state.someSliceIWant
  };
};

Он выдает кучу ошибок, но когда я удаляю эту строку, и веб-пакет перетаскивается, и страница перерисовывается, состояние фактически обновляется правильно, и значения здесь! КАКИЕ?! Я не могу понять, как заставить это сделать это, не выдавая ошибок, поскольку сам Redux / React не допустит этого, насколько я могу судить.

Answer 1

Хакерский способ, которым вы пользуетесь, возможно, вы не сможете получить доступ к stateInProps, если он будет обновлен в более позднем жизненном цикле.

Вы можете использовать что-то, как показано ниже

class Foo extends React.Component {

  state = {};

  componentWillMount() { this.setStateInProps(this.props); }

  componentWillReceiveProps(nextProps) { this.setStateInProps(nextProps)}

  setStateInProps= (props) => this.setState(props.stateInProps)

}

Answer 2

Вы пробовали ComponentWillReceiveProps после сопоставления состояния с Props?

Например:

componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({
        errors: nextProps.errors
      });
    }
  }