在redux中更新了狀態，以接收新道具，但是由於未重新渲染組件而未在componentWillReceiveProps中設置狀態

Question

我正在使用模式將新對象添加到數組。 一切順利，我更新了reducer中的狀態。 甚至redux logger也顯示該對象已添加。 即使在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來更新狀態。它將直接更新