从消费者 componentDidMount 更新反应上下文会导致无限重新渲染

Question

我正在尝试使用 Context API 在 React 中进行一些状态管理；我想要实现的是，当我到达特定路线时，我从服务器加载数据，将其存储在上下文中，并将其显示在页面本身中。这导致了一个无限循环，其中对服务器的请求一遍又一遍地完成（并且永远不会停止）。

我正在尝试为提供者和消费者逻辑使用更高阶的组件：

import React, { Component, createContext } from 'react';

import RequestStatus from '../RequestStatus';
import { getData } from '../Api';

const dataCtx = createContext({
  data: [],
  getData: () => {},
  requestStatus: RequestStatus.INACTIVE,
});
export default dataCtx;

export function dataContextProvider(WrappedComponent) {
  return class extends Component {
    constructor(props) {
      super(props);

      this.state = {
        data: [],
        getData: this.getData.bind(this),
        requestStatus: RequestStatus.INACTIVE,
      };
    }

    async getData() {
      this.setState({ requestStatus: RequestStatus.RUNNING });
      try {
        const data = await getData();
        this.setState({ data, requestStatus: RequestStatus.INACTIVE });
      } catch (error) {
        this.setState({ requestStatus: RequestStatus.FAILED });
      }
    }

    render() {
      return (
        <dataCtx.Provider value={this.state}>
          <WrappedComponent {...this.props} />
        </dataCtx.Provider>
      );
    }
  };
}

export function dataContextConsumer(WrappedComponent) {
  return function component(props) {
    return (
      <dataCtx.Consumer>
        {dataContext => <WrappedComponent dataCtx={dataContext} {...props} />}
      </dataCtx.Consumer>
    );
  };
}

提供者是 App 组件本身：

import React, { Fragment } from 'react';

import { dataContextProvider } from './contexts/DataContext';
import { userContextProvider } from './contexts/UserContext';

import AppRoutes from './AppRoutes';

function App() {
  return (
    <Fragment>
      <main>
        <AppRoutes />
      </main>
    </Fragment>
  );
}

export default userContextProvider(dataContextProvider(App));

这是导致循环的消费者：

import React, { Component } from 'react';

import RequestStatus from './RequestStatus';
import { dataContextConsumer } from './contexts/DataContext';

class DataList extends Component {
  async componentDidMount() {
    const { dataCtx: { getData } } = this.props;
    await getData();
  }

  render() {
    const { dataCtx: { data, requestStatus } } = this.props;
    return (
      {/* display the data here */}
    );
  }
}

export default dataContextConsumer(DataList);

我已尝试从消费者的 HOC 切换，但没有帮助：

import React, { Component } from 'react';

import RequestStatus from './RequestStatus';
import dataCtx from './contexts/DataContext';

class DataList extends Component {
  async componentDidMount() {
    const { getData } = this.context;
    await getData();
  }

  render() {
    const { data, requestStatus } = this.context;
    return (
      {/* display the data here */}
    );
  }
}

DataList.contextType = dataCtx;

export default DataList;

DataList 只是我想要触发上下文更新的页面之一。

我猜是 Provider 导致了整个 App 的重新渲染，但是为什么呢？我哪里出错了，我该如何解决？

Answer 1

好的，在尝试在沙盒中复制问题后，我意识到问题所在：我将父组件包装在渲染函数内的 HOC 中，如下所示：

<Route exact path="/datapage" component={requireLoggedInUser(Page)} />

这会强制 DataList 组件在每次应用重新渲染时被销毁 + 重新创建。

Answer 2

请求循环发生是因为DataList 组件被重新渲染，调用ComponentDidMount，在每次渲染后调用getData()。

如果组件的 props 或 state 发生变化，组件就会呈现。

getData() 设置 state 属性 requestStatus（这就是你的整个应用程序被重新渲染的原因），这是 DataList 的一个属性 - 导致 DataList 的重新渲染。

你不应该使用requestStatus 作为DataList 的道具，因为无论如何你都是从上下文中得到的。

Answer 3

这可能是因为您的提供程序 (dataContextProvider) 级函数 getData 与您从 ../Api 导入的函数具有相同的命名空间。

然后我相信当下面的代码行const data = await getData();在下面的代码块中运行时，它实际上调用了提供者getData函数，从而导致了一个循环。

  async getData() {
      this.setState({ requestStatus: RequestStatus.RUNNING });
      try {
        const data = await getData();
        this.setState({ data, requestStatus: RequestStatus.INACTIVE });
      } catch (error) {
        this.setState({ requestStatus: RequestStatus.FAILED });
      }
    }