父状态更新后如何只调用一次子组件中的方法

Question

我有一个父母和一个孩子。 父组件使用 fetch 请求检索数据（数据被命名为 blurts），并通过 props 将数据发送到子组件。 子组件是一个惰性加载器组件，在用户滚动时一次只显示 6 条记录。

惰性组件根据父组件记录的数量创建自己的状态（数组），这决定了记录是否应该可见。 所有 isVisible 属性最初都设置为 false。

惰性组件中的 componentDidMount()：

componentDidMount() {
    var isVisibleArray = this.props.blurts.map(item => {
        return false;
    });
    this.setState({ isVisible: isVisibleArray });
    this.PushBlurtArray();
    window.addEventListener('scroll', this.LazyLoader);
}

然后，调用 PushBlurtArray() 方法以将前 6 条记录设置为可见。 每次用户滚动到第六条记录时也会调用此方法。 延迟加载器中的内部状态会对此进行跟踪，并根据需要将另外 6 个设置为可见。

惰性组件中的 PushBlurtArray()：

PushBlurtArray() {
    // Initial values that keep track of lazy state.
    var renderCount = this.state.lazyState.skipCount,
        numRendered = this.state.numberRendered,
        isVisibleUpdate = this.state.isVisible;

        // Logic to get the next 6 (or less) blurts in the array and set isVisible to true
        // each time this method is called by the lazyloader method.
        for(let i=numRendered; i<renderCount; i++) {
            if (this.props.blurts[i]) {
                isVisibleUpdate[i] = true;
                numRendered++;
            }
        }

        // Update state accordingly so the loop iterates over the proper numerical
        // sequence keeping the blurts in order of consecutive sixes.
        this.setState(prevState => ({
            lazyState: {
                lzyLoading: true,
                skipCount: prevState.lazyState.skipCount + prevState.lazyState.skipInc,
                skipInc: 6,
                skipDb: prevState.lazyState.skipDb
            },
            isVisible: isVisibleUpdate,
            numberRendered: numRendered
        }));
}

这在一定程度上可以正常工作。 我遇到的限制是父组件只提取 42 条记录的初始计数。 然后，一旦惰性加载器遍历了所有 42 条记录，我就会调用父级中的一个方法，该方法将另外 42 条记录安装到其状态，进而重新呈现惰性加载器。 从理论上讲，这应该无限期地继续下去而不会出现问题。

我遇到的问题是，一旦将 42 条附加记录添加到父状态，就需要调用 PushBlurtArray()。 如果我在 render() 方法或 componentDidUpdate() 中调用 PushBlurtArray()，它最终会重复调用 PushBlurtArray()，这几乎搞砸了整个过程。

在将 42 条记录添加到父组件中的 state 之后，我需要一种方法来调用 PushBlurtArray() 一次。

Answer 1

您可以在componentDidUpdate检查数据的转换。 在这种情况下，您要检查数组的长度以确定它何时发生变化。

componentDidUpdate(props) {
  if (
    (this.props.blurts.length > 0 && !props.blurts.length) ||
    this.props.blurts.length !== props.blurts.length
  ) {
    this.PushBlurtArray();
  }
}