Компонент таблицы не обновляется после обновления состояния

Question

У меня есть компонент таблицы для отображения некоторых данных. После отправки действия данные таблицы в состоянии изменяются. Однако мой компонент таблицы не обновляется. Он обновляется только тогда, когда я нажимаю другую радиокнопку в другом ряду моей таблицы. Я хочу, чтобы мой компонент обновлялся при изменении данных. Вот мой код:

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

Answer 1

Проблема была здесь, поскольку OP уже вывел.

 const evaluationResults = state.evaluationResults;

Это вызывало мутацию состояния, которая противоречит принципам Redux. Хотя значения состояния обновлялись в исходном коде OP, изменения были внесены в тот же исходный объект в ссылке. Redux не регистрирует его как новое состояние, поэтому он не нашел необходимости перерисовывать наш компонент. Для повторного рендеринга вашего подключенного компонента нам нужно совершенно новое состояние приращения.

Чтобы достичь этого, нам нужно создать совершенно новую копию «Оценки результатов», и тогда функция ОП будет работать, как и ожидалось:

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