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

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但这里发生的事情的细节在暗指我。

谁能告诉我：

1. 为什么在没有箭头的情况下调用它会导致递归循环？
2. 箭头如何解决？

Answer 1

在这条线上

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

您认为您正在做的是将setState参数分配给{name: "Bill" }元素的 onClick 处理程序。不是这种情况。

您实际所做的是在渲染期间调用该setState函数，这会更改状态并导致重新渲染。在重新渲染中，调用它改变状态并导致重新渲染发生；在重新渲染中，被调用等。setStatesetState

随着onClick={()=> {setState({name:"Bill"})}您创建箭头函数并将其分配给 onClick 处理程序。当元素被点击时，箭头函数会执行并在内部调用 setState。