javascript - 初始渲染/重新渲染后如何根据 DOM 节点信息设置状态？ ( react )

Question

在我的框架中，在初始渲染和重新渲染之后，我需要有关 React 组件在 DOM 中的状态的某些信息，然后我需要将其作为上下文传递给子组件 em>.

具体来说，我需要知道渲染的 DOM 节点是否是其父节点的第一个/最后一个子节点，并将此信息保留为状态，因此我正在执行以下操作:

componentDidUpdate() {
  if (this.REF.current === this.REF.current.parentNode.firstChild) {
    this.setState({ isFirstChild: true });
  }
}

在此处调用 setState 会触发重新渲染，这是需要的，以便可以将值传递给子组件，这是我通过 context 执行的 - 类似于 (精简):

render() {
  const contextValues = {
    ...this.context,
    ...this.state
  }

  return (
    <ContextProvider value={contextValues}>
      {this.props.children}
    </ContextProvider>
  );
}

...现在在我的子组件中，我可以执行 this.context.isFirstChild 来确定父组件是否是其父组件的第一个子组件。

问题...

设置状态会导致重新渲染。重新渲染会导致设置状态。这会将 React 设置为无限循环，并产生以下错误:

未捕获的不变违规:超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况

我似乎很清楚，我的方法有些是错误的。我只是不确定是什么。我认为我不应该在这里使用 setState ，但后来我错过了关键的重新渲染，它将父状态作为上下文传递给子级。

Answer 1

试试这个:

componentDidUpdate() {
  if (this.REF.current === this.REF.current.parentNode.firstChild) {
    if (!this.state.isFirstChild) {
        this.setState({ isFirstChild: true });
    }        
  }
}

这样，您就不会使用您所在州已有的相同信息重复调用 setState。