Question

当我从日期选择器中选择一个日期时，我正在更新URL。要仅更新URL中的日期查询，我正在执行history.replace，并将所选值设置为我的状态，我正在执行setState。但是我面临一个问题，我的网址被更新了（只是我需要的查询），但是状态不会被更新。这是我的代码

    handleStartDate = date => {

        this.setState({
            startDate: date
        });
        var month = date.getUTCMonth() + 1; //months from 1-12
        var day = date.getUTCDate();
        var year = date.getUTCFullYear();
        var newsStartDate = year + "/" + month + "/" + day;

        const query = new URLSearchParams(this.props.history.location.search);
        query.set("filterInitDate", newsStartDate);
        this.props.history.replace({
            search: query.toString()
        });

};

我的网址如下所示

http://localhost:3000/transactions?page=1&limit=15&filter=%27%27&filterInitDate=2019%2F11%2F2&filterEndDate=2019%2F11%2F18

我可以使用此功能更新filterInitDate，但我所面临的唯一问题是状态startDate不会使用setState进行更新。可能是什么原因？

我的日期选择器

<DatePicker
     className="form-control"
     customInput={<ExampleCustomInput pickerType="from" />}
     selected={this.state.startDate}
     onChange={this.handleStartDate}
     adjustDateOnChange
     dateFormat="dd / MM / yyyy"
/>

如果我注释掉下面的代码，我的状态将被更新，但是URL不会被更新。

this.props.history.replace({
            search: query.toString()
        });

Answer 1

var newSearchParams = updateQueryStringParameter(props.history.location.search, "timeStart", startDate);

props.history.push(newSearchParams);

，然后使用setState更新您的状态。

如果您的组件是第一次呈现，请通过默认值将状态传递给queryParam。

function updateQueryStringParameter(uri, key, value) {
    let re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
    let separator = uri.indexOf('?') !== -1 ? "&" : "?";
    if (uri.match(re))
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    else
        return uri + separator + key + "=" + value;
}

查询字符串更新中断setState

1 个答案: