Question

伙计们，我尝试使用Refs并将this.setState放在他的里面，但是它给出了：

已超过最大更新深度。当一个组件发生这种情况重复调用componentWillUpdate内的setState或 componentDidUpdate。 React将嵌套更新的数量限制为防止无限循环。

我的状态：

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

但是当我使用时：

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

有效。.

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

Answer 1

ref是React中的特殊道具。当组件安装时，React将使用DOM元素调用ref回调，而当卸载时，使用null调用它。 ref个更新发生在componentDidMount或componentDidUpdate生命周期挂钩之前。因此，在第一个示例中，当执行ref道具回调函数时，在挂载之前您要使用state更改setState，因此组件将再次开始 mounting 陈述变化。现在，您进入了无限通话循环。

但是在第二种情况下，您将直接更改state，而这在React中是不应该做的，当您通过直接更改state来更新状态时，它永远不会重新渲染。因此，没有无限通话正在发生。它已正常安装。

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

希望有帮助。

Answer 2

1）引用必须从不存储为组件状态的一部分。只需将其分配给组件的成员即可，

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

2）组件状态绝不能直接修改。否this.state.x = something，请使用setState，以便React可以检测到更改并更新UI。

3）setState() 一定不能直接从render()调用（这会导致无限渲染循环）。

反应引用setState给出最大更新深度。

2 个答案: