为什么函数 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(()&nbsp;=>&nbsp;{ &nbsp;&nbsp;setCount(count&nbsp;+&nbsp;1) },[])我不确定这有什么意义，因为你可以将初始值传递给useState

Answer 3

您收到错误的原因是调用setCount(count + 1);将永远增加状态计数。尝试将其放在一个条件上，例如在下面的codesandbox&nbsp;/代码中，每次单击按钮时状态计数都会增加1。if (count < 10)您还可以在某种条件下setInterval或在多种条件下增加 state 。只是不是无限！;)import React, { useState } from "react";import "./styles.css";export default function App() {&nbsp; const [count, setCount] = useState(0);&nbsp; const increaseCount = () => {&nbsp; &nbsp; setCount(count + 1);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p>value of count : {count} fois</p>&nbsp; &nbsp; &nbsp; <button onClick={increaseCount}>start count</button>&nbsp; &nbsp; </div>&nbsp; );}

Answer 4

您正在调用setCount组件的主体，如果考虑基于类的组件，则本质上是渲染函数。因此，它会导致设置新值、重新渲染、设置新值、重新渲染等等的无限循环。setCount您应该只从某种事件中调用，例如按钮单击或效果，例如使用useEffect