超出了给定最大更新深度的setState的React Refs。

Question

嗨，伙计们，我试着使用Refs并给出这个。setState在其内部，但它给出：

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。

我在做什么:

ref = {
  (anchor) => this.setState({
    anchor
  })
} >

但当我使用时：

ref = {
  (anchor) => this.state.anchor = anchor
} >

它的工作原理。

在其他组件中，我使用这个。setState也很好，有人为什么？

Answer 1

1)参考不得作为组件状态的一部分存储。只需将它分配给组件的成员，如下所示:

<div ref={ x => this.anchor = x } />

2） 切勿直接修改组件的状态。没有这个.state.x = 什么，使用 setState，以便 React 可以检测到更改并进行 UI 更新。

3） setState（） 不能直接从渲染（） 中调用（这会导致无限渲染循环）。

Answer 2

ref是React中的一个特殊道具。安装组件时，React将使用DOM元素调用ref回调，卸载时使用nullcallback调用它ref更新发生在componentDidMount或componentDidUpdatelifecycle挂钩之前。因此，在第一个示例中，当refprops回调函数被执行时，在装载之前，您使用setState更改

但是在第二种情况下，你直接改变了状态，这在 React 中永远不应该完成，当你通过直接改变状态来更新状态时，它永远不会重新开始渲染。所以没有无限的召唤正在发生。它正常安装。

注意:< code>ref不是改变状态的地方。< code>Refs提供了一种方法来访问在render方法中创建的DOM节点或React元素。根据文件。

希望有帮助。