Data updated from outside are not updated about table HOT 7 CLOSED

I was mutating data like this:

setRowChecked(value, id) {
    const data = this.state.data.map((item) => {
      if (item.id === id) {
        item.checkbox = value;
      }
      return item;
    });

    this.setState({
      data,
    });
  }

And I forgot about that item inside map function has still same reference, so map function creates new array but actual objects inside are not new. return { ...item } fixes my problem.

Thank you for your help. Nice lib by the way!

from table.

Just create a shallow copy and pass it to Table after you modify dataSource。

from table.

I am doing that like: (simplified use case)

import React from 'react';
import RcTable from 'rc-table';

class Table extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: props.data,
      columns: props.columns,
    };
  }

 render() {
    const columns = [...this.state.columns];
    const data = [...this.state.data];

    return (<RcTable
      columns={columns}
      data={data}
    />);
 }
}

from table.

So, this may work.

from table.

Yeah, but sadly don't. I was suspicious, that data state is mutated somewhere inside Table.jsx, but I can't find what is wrong.

from table.

There is a tricky problem for array immutable data:

const a = { key: 'value' };
const data = [a];

const newData = [...data];
newData[0].key = 'new value';

console.log(data[0].value); // new value

I made same mistake here: ant-design/ant-design@abecc44

from table.

const a = { key: 'value' };
const data = [a];

const newData = [...data];
newData[0] = { ...data[0] };

console.log(data[0].value); // value

from table.