gpt4 book ai didi

javascript - 状态更新后不重新渲染表组件

转载 作者:行者123 更新时间:2023-11-29 10:27:06 25 4
gpt4 key购买 nike

我有一个用于显示一些数据的表格组件。调度一个 Action 后,状态中的表数据正在改变。但是我的表格组件没有更新。仅当我单击表格另一行中的另一个单选按钮时,它才会更新。我希望我的组件在数据更改时重新呈现。这是我的代码:

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 被触发时,表格会重新呈现,但是当数据被更改时,表格不会重新呈现。只有当我点击另一行时。如何处理?非常感谢

我的 reducer 也改变了表格:

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 状态。

为此,我们需要像这样创建一个全新的 evaluationResults 副本,然后 OP 的功能将按预期工作:

const evaluationResults = [...state.evaluationResults];

关于javascript - 状态更新后不重新渲染表组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56307723/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com