Реагирующий функциональный компонент с использованием ловушки `useState` не обновляет onChange с помощью ReactiveSearch - PullRequest
Новая
       30

Реагирующий функциональный компонент с использованием ловушки `useState` не обновляет onChange с помощью ReactiveSearch

1 голос
/ 26 февраля 2020

Я пытаюсь использовать библиотеку компонентов ReactiveSearch для создания базового c поискового приложения, и мне необходимо использовать компоненты в качестве управляемого компонента (https://reactjs.org/docs/forms.html). Для всех других фильтров, с которыми я работаю, это не проблема, и приложение обнаруживает изменения и обновления соответственно. Однако для этого компонента DateRange он не будет работать. Моя рабочая гипотеза состоит в том, что она имеет отношение к значению состояния, являющемуся объектом, а не массивом, но я пока не могу найти доказательства, подтверждающего это.

Я также пытался использовать обычный компонент класса, с тем же результатом.

Ссылка на песочницу: https://codesandbox.io/s/ecstatic-ride-bly6r?fontsize=14&hidenavigation=1&theme=dark

Basi c фрагмент кода без других фильтров 

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;

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

Просто изменение 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, так как ваше предыдущее состояние полностью перезаписывалось независимо

0 голосов
/ 28 февраля 2020

Оказалось, что основная проблема заключалась в том, как библиотека ReactiveSearch сравнивала даты, а также неправильно устанавливала значения. Сделаю пиар, чтобы это исправить.

...