在redux中更新了状态，以接收新道具，但是由于未重新渲染组件而未在componentWillReceiveProps中设置状态

Question

I'm using a modal to add new object to an array. Everything goes well, I update the state in reducer. Even redux logger also shows that the object has been added. Even in the componentWillReceiveProps lifecycle I'm getting the new props but the local state doesn't gets set inside this lifecycle hook due to which component doesn't re-render.

I have updated the state in reducer. Even I'm getting the new props in my component.

This is the component which needs to re-render

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;

This is the connected parent component

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);

I want to re-render ListSalaryRange component

Answer 1

this is why your table doesn't update

const dataList = this.state.dataList;

instead you should do:

const {dataList} = this.state

one more tip: you don't need to use state in that case, you could directly use this.props.salaryRange. it should save you some line of codes, cause you don't have to declare state, and you don't have to use componentWillReceiveprops to update your state.. it would update directly