使用 `useState` 钩子的 React 功能组件不会使用 ReactiveSearch 更新 onChange

Question

我正在尝试使用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;

Answer 1

只是将value更改为defaultValue对我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"
    />

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

Answer 2

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