[英]Table Component is not re-rendered after state update
我有一個表組件用於顯示一些數據。 在調度動作之后,狀態中的表數據正在變換。 但是我的表組件沒有更新。 僅當我單擊表格另一行中的另一個單選按鈕時才會更新。 我希望我的組件在數據更改時重新呈現。 這是我的代碼:
const mapStateToProps = state => ({
evaluationData: evaluationResultsSelector(state)
});
const mapDispatchToProps = dispatch => ({
setSelectedEvaluationRecord: record =>
dispatch(setSelectedEvaluationRecord(record))
});
export default connect(mapStateToProps,
mapDispatchToProps
EvaluationDataTable,
);
我的組件是這樣的:
import React from 'react';
import Table from 'antd/lib/table';
import 'antd/lib/table/style/css';
import "antd/dist/antd.css";
import { columnEvaluation } from './evaluationDataStructure';
class EvaluationDataTable extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [0], // Check here to configure the default column
};
}
// shouldComponentUpdate(prevProps, prevState) {
// return (prevProps.results !== this.props.results || prevState.selectedRowKeys !== this.state.selectedRowKeys);
// }
onRowChange = selectedRowKeys => {
if (selectedRowKeys.length > 1) {
const lastSelectedRowIndex = [...selectedRowKeys].pop();
this.setState({ selectedRowKeys: lastSelectedRowIndex });
}
this.setState({ selectedRowKeys });
};
onRowSelect = (record) => {
this.props.setSelectedEvaluationRecord(record)
};
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
type: 'radio',
selectedRowKeys,
onChange: this.onRowChange,
onSelect: this.onRowSelect
};
return (
<React.Fragment>
<div style={{ marginBottom: 16 }} />
<Table
rowSelection={rowSelection}
columns={columnEvaluation}
dataSource={this.props.evaluationData}
/>
</React.Fragment>
);
}
}
export default EvaluationDataTable;
當我點擊另一行時,表格會被重新渲染,因為我的setState被觸發但是當數據被激活時,表格不會被重新渲染。 只有當我點擊另一行時。 怎么處理呢? 非常感謝
我的減速器也改變了這個表:
case ACTION_TYPES.EDIT_EVALUATION_RESULTS: {
const evaluationResults = state.evaluationResults;
const editedRecord = action.payload.editedEvaluationData;
evaluationResults.forEach((item, i) => {
if (item.id === editedRecord.id) {
evaluationResults[i] = editedRecord;
}
});
return {
...state,
evaluationResults
};
}
OP已經推斷出問題在這里。
const evaluationResults = state.evaluationResults;
這導致了一種違反Redux原則的狀態突變。 盡管在OP的進程代碼中正在更新狀態值,但是對參考中的相同初始對象進行了更改。 Redux沒有將它注冊為新狀態,因此它不需要重新渲染我們的組件。 要讓連接組件重新渲染,我們需要一個全新的redux-state。
為實現這一目標,我們需要創建一個全新的evaluateResults副本,然后OP的功能將按預期工作:
const evaluationResults = [...state.evaluationResults];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.