React（16.4.1）setState（）使用react-select組件在當前onChange事件之后更新狀態一onChange事件

Question

我有2個反應選擇組件，我要設置的行為是，當用戶從兩個選擇組件中進行選擇時（順序無關緊要），那么將觸發ajax從服務器中提取數據。 需要從這兩個組件中進行選擇才能完全填充ajax調用的GET參數。

我在react-select元素上具有onChange事件的以下2個處理程序：

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());
}

我的getTableData（）方法看起來像：

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 }
                });
            });
    }
}

我遇到的行為是，當用戶從第二個選擇框中選擇一個選項時，ajax調用不會觸發。 用戶需要返回並選擇其他內容來觸發ajax調用，然后使用他們選擇的第一個選擇。

我還嘗試通過此代碼對ajax調用使用ComponentDidUpdate() setState()當我更改為componentDidUpdate(prevState)時，我從每個setState()調用中刪除了getTable()數據）：

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

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

但是，當使用componentDidUpdate()生命周期方法時，會反復觸發ajax，並且永不停止，這是因為setState()永遠不會更新用戶與之交互的最后一個選擇組件的狀態。

所以我認為我在使用/理解setState()方法時做錯了（或者問題出在react-select組件中...）。

對於我要完成的任務的任何見解，幫助或討論將不勝感激！

Answer 1

當您將第二個參數傳遞給setState() ，例如setState({foo: bar}, <something>) ， <something>應該是當setState()完成更新時調用的回調函數 。 在您的代碼中，不是傳遞函數this.getTableData作為參數，而是傳遞從調用 this.getTableData() 返回的表達式 ，在本例中為undefined 。

在您的代碼中：

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());
}

當您同步調用setState()並將狀態更新添加到隊列中時，您還同步調用this.getTableData() ，它立即運行，檢查狀態變量中的一些布爾值，也許嘗試執行ajax調用等。

嘗試簡單地刪除()以便將函數直接作為參數傳遞給setState ，而不是意外地調用函數。 :)

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的第二個參數是回調。 這意味着您應該傳遞對要調用的函數的引用，而不是調用函數本身。

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

應該

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