i'm having a table component for displaying some data. After dispatching an action the table data in the state are channging. However my table component is not updated. It is updated only when i click on another radio button in another row of my table. I want my component to rerender when the data are changed. Here is my code:

const mapStateToProps = state => ({

  evaluationData: evaluationResultsSelector(state)

});



const mapDispatchToProps = dispatch => ({

  setSelectedEvaluationRecord: record =>

    dispatch(setSelectedEvaluationRecord(record))

});





export default connect(mapStateToProps,

  mapDispatchToProps

  EvaluationDataTable,  

);

and my component is this:

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;

When i click in another row the table is rerendered as my setState is triggered but when the data are channged the table is not rerendered. Only when i click in another row. How to deal with it? Thanks a lot

Also my reducer which mutates the table is this:

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

      };

    }