Reactjs 使用'useState'钩子的React功能组件在使用ReactiveSearch进行更改时不会更新

我试图使用

ReactiveSearch

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

我还尝试使用常规类组件，得到了相同的结果

链接到沙盒：

没有其他筛选器的基本代码段

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;

import React，{useState}来自“React”；
进口{
反应基地，
结果列表，
日期范围，
选定过滤器
}来自“@appbaseio/reactivesearch”；
const App=props=>{
常量[filterState，setFilterState]=useState({
日期筛选器：{开始：新日期（），结束：新日期（）}
});
返回(
{
设置过滤器状态({
…过滤器状态，
日期筛选器：{
开始：value.start，
结束：value.end
}
});
}}
componentId=“DateFilter”
dataField=“时间戳”
/>
);
};
导出默认应用程序；

只需将

值

更改为

默认值

对我有效（）

{
设置过滤器状态({
日期筛选器：{
开始：value.start，
结束：value.end
}
});
}}
componentId=“DateFilter”
dataField=“时间戳”
/>

---

我还删除了您的

setFilterState

中的

DateFilter

，因为您以前的状态将被完全覆盖。

事实证明，这是ReactiveSearch库如何比较日期以及未正确设置值的根本问题。将制作一个PR来修复它

我制作了一个PR，以便库可以使用

值
道具，但我也会尝试一下，看看它是否可以作为权宜之计！非常感谢。所以这看起来不完全有效。由于没有
值
属性，因此组件不会将其状态作为受控组件处理。我已经在这个沙盒（）中演示了这一点。点击按钮应该更新状态，日期过滤器应该做出相应的反应，但由于它没有值道具，所以不能这样做，并且添加值道具会导致现在发生的疯狂继续发生。
    <DateRange
      defaultValue={filterState.DateFilter}
      onChange={value => {
        setFilterState({
          DateFilter: {
            start: value.start,
            end: value.end
          }
        });
      }}
      componentId="DateFilter"
      dataField="timestamp"
    />