Как предотвратить бесконечное извлечение данных l oop в ловушке useEffect () с включенным правилом response-redux и eslint (Reaction-hooks / исчерпывающе-deps) - PullRequest
Новая
       87

Как предотвратить бесконечное извлечение данных l oop в ловушке useEffect () с включенным правилом response-redux и eslint (Reaction-hooks / исчерпывающе-deps)

0 голосов
/ 05 марта 2020

Я использую реагирование для отображения моих данных, извлеченных из API с использованием избыточности. Я хотел бы получить данные после монтирования компонента <MatchView /> и после нажатия кнопки (в родительском компоненте). У меня есть кнопки для изменения диапазона дат (+/- один день с сегодняшнего дня). Новая (измененная) дата передается в <MatchView />, и я хотел бы снова получить мои данные (с этой новой датой в качестве запроса).

Компонент Matchview: 

   const MatchesView = ({
      fetchMatches,
      matches = [],
      pending,
      sourceDateRange: [sourceFrom, sourceTo] = [] // <-- This dates are changing in parent component if you click the button
    }) => {
      const sourceISOFormatDateRange = rangeToISOStringWithoutTime(
        sourceFrom,
        sourceTo
      );

  useEffect(() => {
    getMatchesByDateRange(sourceISOFormatDateRange)(fetchMatches); // <-- Fetching function
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sourceFrom, sourceTo]);

      return (
        <div className="product-list-wrapper">
          {pending ? (
            <h1>Loading...</h1>
          ) : (
            <div>
              <DateHeader dateRange={sourceISOFormatDateRange} />
              <Matches matches={matches} />
            </div>
          )}
        </div>
      );
    };

    MatchesView.propTypes = {
      fetchMatches: PropTypes.func,
      matches: PropTypes.array,
      pending: PropTypes.bool,
      sourceDateRange: PropTypes.array
    };

    const mapStateToProps = ({ matchesData }) => ({
      matches: getMatches(matchesData),
      pending: getMatchesPending(matchesData)
    });

    const mapDispatchToProps = dispatch =>
      bindActionCreators(
        {
          fetchMatches
        },
        dispatch
      );

    export default connect(mapStateToProps, mapDispatchToProps)(MatchesView);

Просто хотел знать, почему, если я добавлю больше переменных к [] в useEffect(()=>{},[]), это приведет к бесконечному l oop, извлечению данных навсегда.

С правилом eslint react-hooks/exhaustive-deps он автоматически добавляет больше переменных к [] и useEffect() выглядит следующим образом: 

  useEffect(() => {
    getMatchesByDateRange(sourceISOFormatDateRange)(fetchMatches);
  }, [fetchMatches, sourceFrom, sourceISOFormatDateRange, sourceTo]);

Я также читал, чтобы избежать useEffect() если возможно, и используйте его, только если есть веская причина, потому что это может привести к неожиданному поведению, которое трудно отладить. Я думаю, что здесь я не могу избежать использования useEffect().

...