Question

一旦我将一个对象添加到“setTitle”，我就会收到一个错误。在“useState()”中设置对象有效。

import React, { useState } from "react";

export default function App() {
  const [title, setTitle] = useState({});
  setTitle({
    "somthing": "dfgsf"
  });
  return <p>df</p>;
}

<块引用>

重新渲染太多。 React 限制渲染次数以防止无限循环。

直播：https://codesandbox.io/s/custom-hook-playground-bzt6s?file=/src/App.js

Answer 1

当组件第一次挂载时，会调用“setTitle”函数来更新状态。

状态更新时，会重新渲染，因此会再次调用“setTitle”函数，触发无限循环

解决方案：

使用“useffect”或一些其他函数来更新状态

Answer 2

定义状态时必须使用initialState。然后，您可以添加 onClick 以使用 setState

更改标题状态

这是正确的方法：

import React, { useState } from "react";

export default function App() {
  const [title, setTitle] = useState({"somthing": "dfgsf"});

  function buttonHandler() {
    setTitle({
        "somthing": "dfgsf"
      });
      console.log(title)
  }
  return <button onClick={buttonHandler}>sdf</button>;
}

Answer 3

发生这种情况是因为状态更新会导致重新渲染。因为您正在无条件更新状态，所以组件会无限期地重新渲染。这与初始状态没有任何关系。

Answer 4

useState 接受一个 initialState 作为它的参数。

试试这样的方法？

export default function App() {
  const [title, setTitle] = useState("My Initial Title");
  return <p onClick={() => setTitle('New')}>{title}</p>;
}

在反应中向 useState 添加一个对象。错误“重新渲染过多”

4 个答案: