Состояние обновляется в приёмнике, получающем новые реквизиты, но состояние не устанавливается в componentWillReceiveProps, из-за чего компонент не выполняет повторную визуализацию

Question

Я использую модал для добавления нового объекта в массив. Все идет хорошо, я обновляю состояние в редукторе. Даже излишний логгер также показывает, что объект был добавлен. Даже в жизненном цикле componentWillReceiveProps я получаю новые реквизиты, но в этом хуке жизненного цикла не устанавливается локальное состояние, из-за чего компонент не рендерится повторно.

Я обновил состояние в редукторе. Даже я получаю новые реквизиты в моем компоненте.

Это компонент, который необходимо перерисовать

import React, { Component } from 'react';
import ReactTable from 'react-table';
import '../../../css/listSalaryRange.css';
import NumberEditor from '../../../components/reactTable/numberEditor';
import i18n from '../../../i18n';

class ListSalaryRange extends Component {
constructor(props) {
    super(props);
    this.state = {
        dataList: this.props.salaryRange,
    }
    this.renderNumberEditor = this.renderNumberEditor.bind(this);
 }

componentWillReceiveProps = (nextProps) => {
    debugger;
    if (this.props.salaryRange !== nextProps.salaryRange) {
        this.setState({ dataList: nextProps.salaryRange });
    }
}

renderNumberEditor = (cellInfo) => {
    // debugger;
    // console.log('cell Info', cellInfo);
    return (
        <NumberEditor minValue={0}
            entityRow={cellInfo.original}
            width={cellInfo.width} allowDecimal={false}
            value={cellInfo.value} id={cellInfo.row.SalaryRangeId + '-' + cellInfo.column.id}
            entityId={cellInfo.row.SalaryRangeId} fieldName={cellInfo.column.id} maxLength={3}
            // onUpdate={this.onUpdate}
            className={'v-rt-input'} />
    )
}

render() {
    const dataList = this.state.dataList;
    const style = { textAlign: 'left', overflow: 'inherit', whiteSpace: 'nowrap' };
    const tableColumn = [
        {
            Header: 'Comp Range',
            accessor: 'SalaryRangeId',
            className: 'v-rt-readonly-cell',
            style: { style },
        },
        {
            Header: 'Minimum Compensation',
            accessor: 'MinSalary',
            style: { style },
            Cell: props => this.renderNumberEditor(props),
        },
        {
            Header: 'Maximum Compensation',
            accessor: 'MaxSalary',
            className: 'v-rt-readonly-cell',
            style: { style },
        },
        {
            Header: 'Average Compensation',
            accessor: 'AvgSalary',
            className: 'v-rt-readonly-cell',
            style: { style },
        },
        {
            Header: 'Load Factor',
            accessor: 'LoadFactor',
            style: { style },
            Cell: props => this.renderNumberEditor(props),
        },
        {
            id: 'DeleteSalaryRange',
            accessor: e => {
                return (
                    <button type="button" className="left mgL6 v-btn v-btn-sm v-btn-neutral-solid mgT8">
                        <div className="left wd35 pdT5 center-text" style={{ marginTop: '-7px' }}><i className="ion-ios-trash" aria-hidden="true"></i></div>
                        <div className="left pdR10 col-phone-hidden"><span>Delete</span></div>
                    </button>
                )
            }
        }
    ];

    return (
        <div id="salaryListContainer">
            <ReactTable
                data={dataList}
                columns={tableColumn}
                defaultPageSize={dataList.length}
                showPagination={false}
                resizable={false}
            />
        </div>
    )

}

}

export default ListSalaryRange;

Это подключенный родительский компонент

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Header from './header';
import ListSalaryRange from './listSalaryRange';
import { bindActionCreators } from 'redux';
import { addCompSalaryRange } from '../../../actions/adminActions'
import AppConfig from '../../../appConfig';
import Notifications from '../../../components/common/notifications';
import ShowLoadingNotificationMVC from 
'../../../components/common/showLoadingNotificationMVC';

class Index extends Component {
// componentDidMount() {
//     document.getElementById('compRangesNotification').className = '';
// }
render() {
    return (
        <div>
            <Header salaryRange={this.props.salaryRange} 
addCompSalaryRange={this.props.addCompSalaryRange}/>
            <ListSalaryRange salaryRange={this.props.salaryRange} />
            {/* <div className='v-notify'>
                <ShowLoadingNotificationMVC id={'compRangesNotification'} 
message={'Loading'} />
                <Notifications />
            </div>
            <div className="compRanges-content">
                <iframe id="ifrmCompRanges" height={1650} title={''} 
style={{ border: 'none' }} width={'100%'} src={AppConfig.baseUrl + ' 
ViciAdmin/SalaryRanges2'} />
            </div> */}
        </div>
    )
}
}

const mapStateToProps = (state) => ({
filter: state.filter,
salaryRange: Object.values(state.masterData.salaryRange),
});

const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
    addCompSalaryRange
}, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Index);

Я хочу перерисовать компонент ListSalaryRange

Answer 1

именно поэтому ваша таблица не обновляется

const dataList = this.state.dataList;

вместо этого вы должны сделать:

const {dataList} = this.state

еще один совет: вам не нужно использовать состояние в этом случае, вы можете напрямую использовать this.props.salaryRange. это должно сэкономить вам некоторую строку кодов, потому что вам не нужно объявлять состояние, и вам не нужно использовать componentWillReceiveprops для обновления вашего состояния .. это будет обновлять напрямую