I took it for granted that whenever the dataSource changed, the

component would be rerendered, except for one special case: OnFilter () does not write filter condition, use handleSearch to change/save dataSource state,
render, but not dataSource={XXX}, OnFilter (); onFilter(); onFilter();

PS: The onFilter() method is called at componentDidUpdate(). The onFilter() method is called at componentDidUpdate(). So setState will give an error, so I thought of setting state in onClick, but console.log comes out, dataSource changed, but table shows no data.

Sample code:

handleSearch=(a)= >{

  this.setState({dataSource:dataSourceB})

}



getColumnSearchProps = (dataIndex)= > ({

    filterDropdown: ({

      setSelectedKeys, selectedKeys, confirm, clearFilters,

}) = > (

      <div>

        <Input

          value={selectedKeys[0]}

          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}

          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}

        />

        <Button

          onClick={() => this.handleSearch(selectedKeys, confirm)}

        >

          Search

        </Button>

      </div>

    ),

    //Filter conditions, no code written, so no data returned, so no data

    onFilter: (value, record)= >{},

  })



render{

  return(

    <Table

      column={ [{...this.getColumnSearchProps('name')}}

      dataSource={dataSourceA}

    >

  ) 



}

Copy the code

Example code address: ant.design/components/…

The flow chart for column filtering logic is as follows:

OnFilter () ¶

getLocalData(state? : TableState<T> |null, filter: boolean = true): Array<T> {

    const currentState: TableState<T> = state || this.state;

    const { dataSource } = this.props;

    let data = dataSource || [];

    // Optimize local sorting

   // This is the line of code that stores the dataSource via slice

    data = data.slice(0);

    const sorterFn = this.getSorterFn(currentState);

    if (sorterFn) {

      data = this.recursiveSort(data, sorterFn);

    }

    / / filter

    if (filter && currentState.filters) {

      Object.keys(currentState.filters).forEach(columnKey => {

        const col = this.findColumn(columnKey) as any;

        if(! col) {

          return;

        }

        const values = currentState.filters[columnKey] || [];

        if (values.length === 0) {

          return;

        }

        const onFilter = col.onFilter;

        data = onFilter

          ? data.filter(record => {

              return values.some(v => onFilter(v, record));

            })

          : data;

      });

    }

    return data;

  }

Copy the code

OnFilter () : github.com/ant-design/…

(after)