javascript - 为什么即使未单击按钮，子组件 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>
  );
}

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

此错误发生在没有单击按钮的情况下进行渲染。它怎么会在没有发送点击的情况下导致编译递归？我不明白这是怎么回事。

如果我像这样使用箭头函数，就会出现错误:

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

我有点理解箭头函数改变了this，但这里发生的事情的细节是在暗示我。

谁能告诉我:

1. 为什么不带箭头调用会导致递归循环？
2. arrow 如何修复它？

Answer 1

在这条线上

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

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

您实际上在做的是调用 setState 函数在 渲染期间，这会更改状态并导致重新渲染。在重新渲染中，调用 setState 更改状态并导致重新渲染；在重新渲染中，调用 setState 等

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