时间戳

首页 > 解决方案 > React Refs woth setState 给出了最大更新深度。

javascript - React Refs woth setState 给出了最大更新深度。

问题描述

Helo 伙计们，我试图使用 Refs 并this.setState在他的内部给出，但它给出了：

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

我怎么样：

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

但是当我使用：

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

有用..

在其他组件中，我this.setState也使用它并且效果很好，有人为什么呢？

标签： javascriptreactjs

解决方案

ref是 React 中的一个特殊道具。React 将在组件挂载ref时使用 DOM 元素调用回调，并在组件卸载时调用它。 更新发生在生命周期钩子之前。所以在第一个例子中，当props 回调函数被执行时，在挂载之前你正在改变using ，所以组件由于状态改变再次开始挂载。现在您处于无限呼叫循环中。nullrefcomponentDidMountcomponentDidUpdaterefstatesetState

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

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

希望有帮助。

推荐阅读