javascript - 在 HOC 中包装数据获取组件以在加载时显示微调器

Question

我有一堆不同的 react 组件通过 api 获取数据，它们每个都有相应的 loadData 操作和 isLoading reducer。我正在尝试编写一个 HOC，它将显示加载微调器而不是组件，直到加载数据并且可以显示组件。

现在 isLoading 为真 -> 微调器呈现 -> isLoading 变为假 -> 子组件呈现 -> 子组件的 componentDidMount() 已执行 -> 这再次调用将 isLoading 设置为 false 的 loadData 操作，依此类推。如何防止这种情况并只调用 loadData 一次？或者也许有更优雅的解决方案？

class DataList extends Component {
  componentDidMount() {
    this.props.loadData(); //action that pulls data via api
  }

  render() {
    return <p>{this.props.data}</p>;
  }
}

const withSpinner = (comp) => (props) => {
  if (props.isLoading) {
    return <p>Loading...</p>
  } else {
    return <comp {...props} />
  }
}

export default connect()(withSpinner(DataList));

// action that fetches data and updates state
const loadData = () => {
  setIsLoading(true);
  data = await fetchData();
  setIsLoading(false);
}

Answer 1

好吧，解决此问题的最简单方法之一是将 dataLoaded 值添加到您维护状态的任何位置，并在您执行以下操作时将其设置为 true已加载您的数据。然后，只需在调用 loadData 之前添加一个检查，这将阻止额外的加载请求。它看起来像这样:

class DataList extends Component {
  componentDidMount() {
    if (!this.props.dataLoaded) { // call it whatever you want
      this.props.loadData(); //action that pulls data via api
    }
  }

  render() {
    return <p>{this.props.data}</p>;
  }
}

const withSpinner = (comp) => (props) => {
  if (props.isLoading) {
    return <p>Loading...</p>
  } else {
    return <comp {...props} />
  }
}

export default connect()(withSpinner(DataList));

// action that fetches data and updates state
const loadData = () => {
  setIsLoading(true);
  data = await fetchData();
  setIsLoading(false);
  setIsLoaded(true);
}

或者，您也可以将 dataLoaded 放在 loadData 函数中，前提是您可以访问其中的状态