onFetchData called twice? one before rendering and the other one after rendering

In order to reset filter and sort, I have used filtered and sored prop, and I do controll them by onFilterChange and onSortChange. Code like this:

render(){
console.log('-=-=-=-=render state:', this.state)
...
return <ReactTable
            {...this.props.pageSetting} //默认全局配置
            columns={columns}
            manual // Forces table not to paginate or sort automatically, so we can handle it server-side
            data={data}
            pages={pages} // Display the total number of pages
            loading={loading} // Display the loading overlay when we need it
            onFetchData={this.fetchData.bind(this)} // Request new data when things change
            sorted={this.state.sorted}  // Order to reset sort, if dont need reset could remove this
            onSortedChange={this.onSortChange.bind(this)} // Order to reset sort, if dont need reset could remove this
            filterable // Show the filter row
            filtered={this.state.filtered} // Order to reset filter, if dont need reset could remove this
            onFilteredChange={this.onFilterChange.bind(this)} // Order to reset filter, if dont need reset could remove this
            onPageSizeChange={(pageSize) => { this.setState({ pageSize }) }} // Handler when page size change
            className="-striped -highlight"
/>
}


onSortChange(newSort, column, shiftKey) {
        // console.log('-=-=-=123 newSort:', newSort)
        // console.log('-=-=-=123 column:', column)
        // console.log('-=-=-=123 shiftKey:', shiftKey)
        this.setState({ sorted: newSort })
    }

    onFilterChange(filter, value) {
        console.log('-=-=-=123 filter:', filter)
        console.log('-=-=-=123 value:', value)
        this.setState({ filtered: filter })
    }

As the code, I set state in onFilteredChange, but why onFetchData called before render? And log like this, it call twice api do confuse me!

[gary-menzel]

Just because you CAN do something with ReactTable does not mean that it was meant to work that way or is reliable. That is my point. If it works for you and you don’t care about possible breaking changes then go right ahead.

It seems as though @mrijke understands what I mean by using either onFetchData or the on*Change callbacks - but not both. Using both WILL eventually cause double calls.

You don’t need the callback method to push props in to ReactTable. You only need the callback methods to know that the user changed something. In the case of onFetchData anything that may have caused a change is passed to onFetchData - so you should not need any of the callback methods and your end-of-pipe call to setData should then cause the update.

Obviously, if you call setData outside of that pipeline then it will cause another update - that is the nature of React.

[swp44744]

I updated my comment above… 👍 it make sense what you said.