React（16.4.1）setState（）使用react-select组件在当前onChange事件之后更新状态一onChange事件

Question

I have 2 react-select components and the behavior I wish to set is that when the user makes their selection from both select components (order does not matter) then an ajax will be triggered to pull the data from the server. The selection from both of these components is required to fully populate the GET parameters for the ajax call.

I have these 2 handlers for the onChange event on the react-select elements:

filterSiteSelect(selection) {
    const siteId = selection.id;
    const siteName = selection.name;

    this.setState({
        siteId, siteName
    }, this.getTableData());
}

filterLineTypeSelect(selection) {
    const lineTypeId = selection.id;
    const lineTypeName = selection.name;

    this.setState({
        lineTypeId, lineTypeName
    }, this.getTableData());
}

And my getTableData() method looks like:

getTableData() {
    const {
        productId, siteId, lineTypeId, stages, tableUrl
    } = this.state;

// tableUrl = `p=field&t=view&gapi=1&product_id=${productId}&site_id=${siteId}&line_type_id=${lineTypeId}&stage_ids=${stages}`

    if (productId && siteId && lineTypeId && !_.isEmpty(stages)) {
        Axios.get(tableUrl)
            .then((result) => {
                this.setState({
                    rawData: { ...result.data.data }
                });
            });
    }
}

The behavior I am experiencing is that when the user select's an option from the second select box the ajax call does not fire. The user needs to go back and select something else to get the ajax call to fire and then it uses the first selection they chose.

I also tried to use ComponentDidUpdate() for the ajax call with this code (I removed the getTable() data from each of the setState() calls when I changed to componentDidUpdate(prevState) ):

componentDidUpdate(prevState) {
    const {
        siteId, lineTypeId, stages
    } = this.state;

    if (lineTypeId !== prevState.lineTypeId && siteId !== prevState.siteId && !_.isEqual(stages, prevState.stages)) {
        this.getTableData();
    }
}

But what happens when using the componentDidUpdate() lifecycle method it fires the ajax over and over never stoping and I believe that is because the setState() is never updating the state for the last select component the user interacted with.

So I think I'm doing something wrong in my use/understanding of the setState() method (or the issue lies in the react-select component...).

Any insight, assistance, or discussion of what I'm trying to accomplish would be greatly appreciated!

Answer 1

When you pass a second argument to setState() , eg setState({foo: bar}, <something>) , the <something> is supposed to be a callback function that gets called when setState() has finished updating. In your code, instead of passing your function this.getTableData as an argument, you are passing the expression returned from calling this.getTableData() , in this case undefined .

In your code here:

filterSiteSelect(selection) {
    const siteId = selection.id;
    const siteName = selection.name;

    this.setState({
        siteId, siteName
    }, this.getTableData());
}

filterLineTypeSelect(selection) {
    const lineTypeId = selection.id;
    const lineTypeName = selection.name;

    this.setState({
        lineTypeId, lineTypeName
    }, this.getTableData());
}

When you synchronously call setState() and add a state update to the queue, you are also synchronously calling this.getTableData() which runs immediately, checks some booleans in your state variables, maybe tries to do an ajax call, etc.

Try simply removing the () so that you're passing the function directly into setState as an argument instead of accidentally calling the function. :)

filterSiteSelect(selection) {
    const siteId = selection.id;
    const siteName = selection.name;

    this.setState({
        siteId, siteName
    }, this.getTableData);
}

filterLineTypeSelect(selection) {
    const lineTypeId = selection.id;
    const lineTypeName = selection.name;

    this.setState({
        lineTypeId, lineTypeName
    }, this.getTableData);
}

Answer 2

setState 's second parameter is a callback. That means you should be passing a reference to the function to call, instead of calling the function itself.

this.setState({
    siteId, siteName
}, this.getTableData());

Should be

this.setState({
    siteId, siteName
}, this.getTableData);