为什么函数 useState 不更新值？

Question

我正在尝试 React.js 但我想要的不起作用。这是我的代码：import React, { useState } from 'react';   function App() {    const [count, setCount] = useState(0);     setCount(count + 1);    return (      <div>        <p>value of count : {count} fois</p>      </div>    );  }export default App;我有 ：Too many re-renders. React limits the number of renders to prevent an infinite loop.您可以在那里看到错误：https://codesandbox.io/s/nostalgic-engelbart-tzbxv ?file=/src/App.js:0-244感谢您的帮助 ！

Answer 1

每当您更改状态时，就会触发重新渲染。

在你的情况下，当你调用setCount并且count状态count正在改变并且它正在触发重新渲染并且这个循环继续时。这就是这个错误的原因。

尝试这个示例，其中setCount仅调用一次并且值按预期更改。

import React, { useState, useEffect } from "react";

function App() {

  const [count, setCount] = useState(0);

  useEffect(() => {

    setCount(count + 1);

  }, []);

  return (

    <div>

      <p>value of count : {count} fois</p>

    </div>

  );

}

export default App;

这是另一个示例，count每次按下按钮时 都会增加：

import React, { useState, useEffect } from "react";

function App() {

  const [count, setCount] = useState(0);

  useEffect(() => {

    setCount(count + 1);

  }, []);

  return (

    <div>

      <p>value of count : {count} fois</p>

      <button

        onClick={() => {

          setCount(count + 1);

        }}

      >

        Increase

      </button>

    </div>

  );

}

export default App;

Answer 2

你正在创建一个无限循环。每次状态更新时，组件都会重新渲染。组件正在渲染，然后调用setCount状态更新，然后组件渲染，如此循环下去。

您可以useEffect在第一次渲染后更新状态。

useEffect(() => {
  setCount(count + 1)
},[])

我不确定这有什么意义，因为你可以将初始值传递给useState

Answer 3

您收到错误的原因是调用setCount(count + 1);将永远增加状态计数。尝试将其放在一个条件上，例如在下面的codesandbox /代码中，每次单击按钮时状态计数都会增加1。if (count < 10)您还可以在某种条件下setInterval或在多种条件下增加 state 。只是不是无限！;)

import React, { useState } from "react";

import "./styles.css";

export default function App() {

  const [count, setCount] = useState(0);

  const increaseCount = () => {

    setCount(count + 1);

  };

  return (

    <div>

      <p>value of count : {count} fois</p>

      <button onClick={increaseCount}>start count</button>

    </div>

  );

}

Answer 4

您正在调用setCount组件的主体，如果考虑基于类的组件，则本质上是渲染函数。因此，它会导致设置新值、重新渲染、设置新值、重新渲染等等的无限循环。

setCount您应该只从某种事件中调用，例如按钮单击或效果，例如使用useEffect