У меня есть вопрос об обновлении реквизита. У меня есть компонент, подключенный к избыточному магазину. Когда корневой компонент монтируется, я вызываю ajax-запрос и обновляем хранилище Мой подключенный компонент получает новые реквизиты, но он не рендерится повторно (вариантов нет). Я знаю, что могу обновить внутреннее состояние подключенного компонента, но ... это необходимо?
componentWillReceiveProps
receive props
{agreements: Array(4), actions: {…}} //nextProps
{agreements: Array(0), actions: {…}} //this.props
Нажмите кнопку обновления
refresh {agreements: Array(4), actions: {…}} //this.props
Мой подключенный компонент
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import * as agreementActions from '../../actions/agreementActions';
class ChangeAgreement extends Component {
constructor(props) {
super(props);
this.refresh = this.refresh.bind(this);
}
refresh()
{
console.log('refresh');
console.log(this.props);
}
componentWillReceiveProps(nextProps, prevState) {
console.log('receive props');
console.log(nextProps);
console.log(this.props);
}
render() {
const { agreements } = this.props;
return (
<div>
Pick agreement
<button onClick={this.refresh}>Refresh</button>
<select>
{agreements.map((item) => {
<option value={item.ID}>{item.NM}</option>;
})}
</select>
</div>
);
}
}
function mapStateToProps(state) {
return {
agreements: state.agreements
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(Object.assign({}, agreementActions), dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ChangeAgreement);