1

我正在尝试使用ReactiveSearch组件库来构建基本的搜索应用程序，并且需要将组件用作受控组件（https://reactjs.org/docs/forms.html）。对于我正在使用的所有其他过滤器，这没问题，并且应用程序会相应地检测更改和更新。但是，对于这个 DateRange 组件，它不起作用。我的工作假设是它与作为对象而不是数组的状态值有关，但我还找不到支持这一点的证据。

我也尝试过使用常规类组件，结果相同。

沙盒链接：https ://codesandbox.io/s/ecstatic-ride-bly6r?fontsize=14&hidenavigation=1&theme=dark

没有其他过滤器的基本代码片段

import React, { useState } from "react";
import {
  ReactiveBase,
  ResultsList,
  DateRange,
  SelectedFilters
} from "@appbaseio/reactivesearch";

const App = props => {
  const [filterState, setFilterState] = useState({
    DateFilter: { start: new Date(), end: new Date() }
  });
  return (
    <div className="App">
      <ReactiveBase
        app="good-books-ds"
        credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
      >
        <DateRange
          value={filterState.DateFilter}
          onChange={value => {
            setFilterState({
              ...filterState,
              DateFilter: {
                start: value.start,
                end: value.end
              }
            });
          }}
          componentId="DateFilter"
          dataField="timestamp"
        />
        <SelectedFilters />
      </ReactiveBase>
    </div>
  );
};

export default App;
4

2 回答 2

1

只是value改为defaultValue为我工作（https://codesandbox.io/s/jolly-spence-1o8bv）。

    <DateRange
      defaultValue={filterState.DateFilter}
      onChange={value => {
        setFilterState({
          DateFilter: {
            start: value.start,
            end: value.end
          }
        });
      }}
      componentId="DateFilter"
      dataField="timestamp"
    />

我还删除了DateFilter您的传播setFilterState，因为无论如何您之前的状态都被完全覆盖了。

于 2020-02-26T16:57:11.097 回答
0

事实证明，ReactiveSearch 库如何比较日期以及未正确设置值是一个潜在问题。会做一个 PR 来修复它。

于 2020-02-28T15:00:33.150 回答