Как получить доступ к магазину из componentDidMount ()? - PullRequest
Новая
       8

Как получить доступ к магазину из componentDidMount ()?

0 голосов
/ 15 января 2019

Это возможный дубликат

Как получить доступ к онлайн-хранилищу в компоненте реагированияDIdMount ()

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

Мне нужно получить доступ к моему магазину редуксов с componentDidMount(). Следующий код отображает компонент <h3>, но значение console.log() null: 

class FinishedPaying extends Component {

  componentDidMount() {
    console.log(this.props.paymentID);
  }
  render() {
    return (
      <div>
        <h3>{this.props.paymentID}</h3>
      </div>
    );
  }
}

const mapStateToProps = (state, props) => {
  return {
    paymentID: state.paymentID
  };
};

const mapActionsToProps = (dispatch, props) => {
  return bindActionCreators(
    {
      updatePaymentID: updatePaymentID
    },
    dispatch
  );
};

export default connect(
  mapStateToProps,
  mapActionsToProps
)(FinishedPaying);

код редуктора: 

import { UPDATE_PAYMENTID } from "../actions/paymentID-actions";

export default function paymentIDReducer(state = "", { type, payload }) {
  switch (type) {
    case UPDATE_PAYMENTID:
      return payload.paymentID;
    default:
      return state;
  }
}

код действия: 

export const UPDATE_PAYMENTID = "paymentID:updatePaymentID";

export function updatePaymentID(newPaymentID) {
  return {
    type: UPDATE_PAYMENTID,
    payload: {
      paymentID: newPaymentID
    }
  };
}

1 Ответ

0 голосов
/ 15 января 2019

Когда componentDidMount показывает одно значение (через console.log) и отображается другое значение, одно вероятное объяснение состоит в том, что компонент повторно визуализируется сразу после монтирования (например, первоначальный рендеринг с нулевым значением, а затем действие приставки отправляется сразу после начального рендеринга, который устанавливает значение). Вы можете легко увидеть, так ли это на самом деле, выполнив console.log из метода render. Я ожидаю, что вы увидите два журнала из метода render - один синхронизируется с componentDidMount, а затем другой со значением, которое вы видите обработанным.

Чтобы получить соответствующее значение в componentDidMount, вам нужно изменить порядок событий, чтобы компонент не отображался до тех пор, пока состояние не будет обновлено, или реорганизовать логику в componentDidMount для использования другие / дополнительные методы жизненного цикла, позволяющие распознавать, когда значение изменяется, и соответствующим образом обрабатывать его.

...