Question

我有一个正在渲染的React组件，一些初始数据尚未可用。因此，我有两个if块（保护条款）检查我们是否处于甚至困扰渲染的状态。基本上，当使用这个组件时，我们处于一种状态，我们有数据的头记录，但还没有详细记录。因此，该组件在显示之前识别并检索细节。

这个感觉错误，因为这不是在React / Redux中应该完成的方式。此外，第二个if块可能会导致无限循环。它基本上检查我们是否有标题记录的详细数据。如果没有，我们返回并致电props.onSortItemChanged()以开始获取数据的过程。如果数据不存在怎么办？然后我们回到这里再次打电话。无论如何，这只是一个问题。

主要问题是我认为这样的组件不应该知道或不关心必须修复/检索数据。它应该只显示已经是正确形式的数据。是对的吗？如果是这样，在哪里检查并确保数据处于良好状态？那个行动？减速机？

  render() {
    const {
      printSortOptions,
      printSortDetails,
      selectedPrintSortOption,
      printSortDrawerEvent
    } = this.props;

    if (printSortDrawerEvent === printSortDrawerEventTypes.CLOSE ||
        printSortDrawerEvent === printSortDrawerEventTypes.FAIL) {
      return <div id="emptyDiv" />;
    }

    if (printSortOptions && printSortDetails.length === 0) {
      const selectedOptions = printSortOptions.filter(o => o.isDefault);
      this.props.onSortItemChanged(selectedOptions[0]);
      return this.constructor.loadingJsx();
    }

    const selectedPrintSortDetails = printSortDetails.filter(
      d => d.printSortOption.printSortId === selectedPrintSortOption.printSortId)[0];

    return (
      <div className="col-xs-12">
      // remaining JSX here
    )
  }

如果/ React / Redux组件中的/ Guard子句

0 个答案: