Question

我试图理解为什么当我尝试在子组件按钮onclick事件上设置状态时会导致递归循环。

例如，此代码生成错误：

import React, { useState } from "react";

export default function App() {
  const [formState, setFormState] = useState({ name: "Joe" });

  return (
    <div className="App">
      <Child state={formState} setState={setFormState} />
    </div>
  );
}

function Child({ state, setState }) {
  return (
    <div className="">
      <h1>Name:{state.name}</h1>
      <button onClick={setState({ name: "Bill" })}>Next</button>
    </div>
  );
}

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

在未单击按钮的情况下渲染时发生此错误。它如何导致甚至在没有发送点击的情况下进行递归编译？我不明白这里发生了什么。

如果我像这样使用箭头功能，就会出错：

function Child({ state, setState }) {
  return (
    <div className="">
      <h1>Name:{state.name}</h1>
      <button onClick={() => setState({ name: "Bill" })}>Next</button>
    </div>
  );
}

我有点理解箭头功能会更改this，但是这里发生的事情恰恰暗示了我。

有人可以告诉我：

为什么不带箭头调用它会导致递归循环？
箭头如何解决？

Answer 1

在此行

<button onClick={setState({ name: "Bill" })}>Next</button>

您认为您正在执行的工作是将setState和参数{name: "Bill" }分配给元素的onClick处理程序。事实并非如此。

您实际上正在做的是调用 setState函数在渲染过程中，它会更改状态并导致重新渲染。在重新渲染中，调用setState会更改状态并导致重新渲染；在重新呈现中，称为setState，依此类推。

使用onClick={()=> {setState({name:"Bill"})}创建箭头函数并将其分配给onClick处理程序。单击该元素时，将执行箭头功能，并在内部调用setState。

为什么即使未单击按钮，在子组件onclick中设置状态也会导致递归循环？

1 个答案: