Невозможно обновить компонент внутри тела функции другого компонента.

Question

В reactJS я хочу создать функцию, которая будет отвечать за загрузку данных.

Вызов этой функции выполняется в Controller, потомках моего компонента.

Я также хочу вызвать функцию loadData из Controller при изменении state.perPage и state.page.

Я переключился с компонента класса на компонент функции, но ошибка остается:

Cannot update a component from inside the function body of a different component

Это мой компонент:

const MyPromotionsController = (props) => {
  const {
    children,
    fetchSuccess,
    t,
    loadingComponent: LoadingComponent,
    pagination: initialPagination,
    sort,
    filter,
    ...rest // eslint-disable-line no-unused-vars
  } = omit(props, [
    'setLocale',
    'locale',
  ]);
  const dataProvider = useDataProvider();
  const [pagination, setPagination] = useState(initialPagination);

  const _loadData = () => {
    const params = {
      pagination,
      sort,
      filter,
    };
    return dataProvider
      .getList('merchants/promotions', params);
  };

  return (
    <Controller
      pagination={pagination}
      FetchStart={LoadingComponent}
      FetchError={TranslatedFetchError}
      loadData={_loadData}
      onFetchSuccess={fetchSuccess}
      fetchStartMessages={{
        fetching: 'promotionsController.fetchStart.fetching',
      }}
      fetchErrorMessages={{
        error: 'promotionsController.fetchError.error',
      }}
    >
      {cloneElement(children, {
        pagination,
        setPagination,
      })}
    </Controller>
  );
};

Я пытался использовать useEffect вот так, но теперь функция никогда не вызывается:

const MyPromotionsController = (props) => {
  const {
    children,
    fetchSuccess,
    t,
    loadingComponent: LoadingComponent,
    pagination: initialPagination,
    sort,
    filter,
    ...rest // eslint-disable-line no-unused-vars
  } = omit(props, [
    'setLocale',
    'locale',
  ]);
  const dataProvider = useDataProvider();
  const [pagination, setPagination] = useState(initialPagination);

  let _loadData = () => {};
  useEffect(() => {
    _loadData = () => {
      const params = {
        pagination,
        sort,
        filter,
      };
      return dataProvider
        .getList('merchants/promotions', params);
    };
  }, [pagination]);

  return (
    <Controller
      pagination={pagination}
      FetchStart={LoadingComponent}
      FetchError={TranslatedFetchError}
      loadData={_loadData}
      onFetchSuccess={fetchSuccess}
      fetchStartMessages={{
        fetching: 'promotionsController.fetchStart.fetching',
      }}
      fetchErrorMessages={{
        error: 'promotionsController.fetchError.error',
      }}
    >
      {cloneElement(children, {
        pagination,
        setPagination,
      })}
    </Controller>
  );
};

Это контроллер:

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: 0,
      data: null,
      error: null,
    };
  }

  async componentDidMount() {
    await this.refreshData();
  }

  async UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(this.props.pagination) !== JSON.stringify(nextProps.pagination)) {
      console.log(nextProps);
      await this.refreshData();
    }
  }

  refreshData = async () => {
    const {
      loadData,
      onFetchStart,
      onFetchSuccess,
      onFetchError,
      fetchStart,
      fetchSuccess,
      fetchError,
      fetchErrorMessages: { error: errorMessage },
      t,
    } = this.props;
    this.setState({
      loading: 1,
    });
    try {
      fetchStart();
      if (onFetchStart) {
        onFetchStart();
      }
      const data = await loadData();
      this.setState({
        data,
        loading: 0,
        error: null,
      });
      fetchSuccess(data);
      if (onFetchSuccess) {
        onFetchSuccess(data);
      }
    } catch (e) {
      console.log(e);
      const error = new Error(t(errorMessage));
      fetchError(error);
      this.setState({
        data: null,
        loading: 0,
        error,
      });
      if (onFetchError) {
        onFetchError(new Error(t(errorMessage)));
      }
    }
  };

  render() {
    const {
      children,
      fetchStartMessages,
      fetchErrorMessages,
      FetchStart,
      FetchError,
      ...rest
    } = omit(this.props, [
      'onFetchSuccess',
      'onFetchStart',
      'onFetchError',
      'fetchSuccess',
      'fetchStart',
      'fetchError',
      't',
      'setLocale',
      'locale',
    ]);
    const { loading, data, error } = this.state;

    if (!error && !data && FetchStart) {
      return (
        <FetchStart
          messages={fetchStartMessages}
        />
      );
    }
    if (error && FetchError) {
      return (
        <FetchError
          loading={loading}
          error={error}
          onPress={this.refreshData}
          messages={fetchErrorMessages}
        />
      );
    }

    return cloneElement(children, {
      ...rest,
      data,
      error,
      loading,
      refreshData: this.refreshData,
    });
  }
}

Как я могу исправить эти предупреждения?