Javascript 无法从其他组件的函数体内部更新组件

在reactJS中，我想创建一个函数来负责加载数据

此函数的调用在我的组件的子级

控制器中完成

我还想在
state.perPage
和
state.page
更改时从
控制器调用
loadData
功能

我已从类组件切换到函数组件，但错误仍然存在：

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>
  );
};

这是控制器：

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,
    });
  }
}

类控制器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：0，
数据：空，
错误：null，
};
}
异步组件didmount（）{
等待此消息。刷新数据（）；
}
异步不安全组件将接收Props（下一步）{
if（JSON.stringify（this.props.pagination）！==JSON.stringify（nextrops.pagination））{
console.log（nextrops）；
等待此消息。刷新数据（）；
}
}
刷新数据=异步（）=>{
常数{
加载数据，
一开始，
一旦成功，
onFetchError，
开始吧，
取得成功，
获取错误，
fetchErrorMessages:{error:errorMessage}，
T
}=这是道具；
这是我的国家({
装载量：1，
});
试一试{
fetchStart（）；
如果（onFetchStart）{
onFetchStart（）；
}
常量数据=等待加载数据（）；
这是我的国家({
数据，
加载：0，
错误：null，
});
获取成功（数据）；
if（onFetchSuccess）{
onFetchSuccess（数据）；
}
}捕获（e）{
控制台日志（e）；
常量错误=新错误（t（errorMessage））；
获取错误（error）；
这是我的国家({
数据：空，
加载：0，
错误，
});
if（onFetchError）{
onFetchError（新错误（t（errorMessage）））；
}
}
};
render（）{
常数{
儿童
获取StartMessages，
获取错误消息，
开始吧，
获取错误，
休息
}=省略（this.props[
“onFetchSuccess”，
“onFetchStart”，
“onFetchError”，
“取得成功”，
“fetchStart”，
“fetchError”，
"t",，
“setLocale”，
“区域设置”，
]);
const{loading，data，error}=this.state；
if（！error&&！data&&FetchStart）{
返回(
);
}
if（error&&FetchError）{
返回(
);
}
返回cloneElement（儿童{
休息
数据，
错误，
加载，
refreshData:this.refreshData，
});
}
}

如何修复这些警告？
您使用的是哪个react版本？我使用react v16.13.0看看这个
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,
    });
  }
}