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

【问题标题】：React functional component using the `useState` hook does not update onChange using ReactiveSearch使用 `useState` 挂钩的 React 功能组件不会使用 ReactiveSearch 更新 onChange
【发布时间】：2020-06-10 12:09:25
【问题描述】：

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

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

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

基本代码 sn-p 没有其他过滤器

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;

【问题讨论】：

标签： reactjs reactivesearch

【解决方案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"
    />

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

【讨论】：

我做了一个 PR，以便该库与 value 属性一起使用，但我也会尝试这个，看看它是否可以作为权宜之计！谢谢！
所以看起来这并不完全有效。由于没有 value 属性，组件不会将其状态作为受控组件处理。我已经在这个沙盒 (codesandbox.io/s/hungry-shamir-usomr) 中演示了这一点。单击按钮应该会更新状态，并且日期过滤器应该做出相应的反应，但是由于它没有 value 道具，所以它没有这样做，并且添加 value 道具会导致现在正在发生的疯狂继续发生。

【解决方案2】：

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

【讨论】：