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来更新状态。它将直接更新

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

1 个答案: