React useState钩子无限期运行 - 无限循环

Posted 2023-02-27

【中文标题】React useState钩子无限期运行 - 无限循环

【英文标题】：React useState hook is running indefinitely - infinite loop

【发布时间】：2021-10-05 22:05:11

【问题描述】：

我有一个简单的反应功能组件。

代码应该是不言自明的。如果状态等于“某些状态”，则转到一个 URL，获取一些信息，并将组件的状态设置为已获取的信息。在 return() 上只显示信息。一切正常，显示数据的 id。但是，当我打开开发工具并进行检查时，console.log("data"+data.id);无限期运行。我想知道是什么让它无限期地运行。

如果我从 fetch 中删除更改数据（数据），console.log 不会无限期运行。

我在摸不着头脑，为什么，更改状态会使代码进入无限循环？

function ReturnInfo(props) 
var currentstatus = props.currentstatus; // receiving the current status as prop from parent.

const [data, changeData] = useState();
let  slug  = useParams(); // getting the slug.


if (currentstatus == 'some status') 
    fetch(`https:someurl/$slug`).
        then(res => res.json()).
        then(data => 
            console.log("data" + data.id);
            changeData(data);
        );



    return (
        <div>
            <div>
                data.id
            </div>
        </div>
    )



else 
    return (
        <p>try harder!</p>
    )

【参考方案1】：

每次渲染组件时，您都会调用该函数。该函数被调用，它更新状态，并使组件重新渲染。

您应该在事件发生时调用该函数或在每次执行块时更改当前状态值。

【参考方案2】：

changeData(data) 将导致重新评估组件。这导致再次调用 fetch ，导致无限循环。

useEffect(() 
if (currentstatus == 'some status') 
fetch(`https:someurl/$slug`).
    then(res => res.json()).
    then(data => 
        console.log("data" + data.id);
        changeData(data);
    );

,[])

【讨论】：

它不起作用。每次遇到 changedata(data) 时，都会调用 useEffect() 并再次陷入无限循环！我已经尝试过您建议的代码。如果console.log的无限循环

也有同样的问题

是否在useEffect中提供数据作为依赖？

【参考方案3】：

你应该使用useEffect，Effect Hook 可以让你在函数组件中执行副作用： useEffect 文档 = https://reactjs.org/docs/hooks-effect.html

如果你不添加依赖数组，它将在每次更新时运行。 简单地将您的副作用/异步任务代码包装在 useEffect 函数中。 并添加依赖数组。如果您只想运行一次，请添加空数组。

 useEffect(() => 
 fetch(`https:someurl/$slug`).
        then(res => res.json()).
        then(data => 
            console.log("data" + data.id);
            changeData(data);
        );
    , [slug])
   

它将停止不必要的重新渲染。

编辑试试这个

function ReturnInfo(props) 
var currentstatus = props.currentstatus; // receiving the current status as prop from parent.

const [data, changeData] = useState();
let  slug  = useParams(); // getting the slug.


useEffect(() => 
 fetch(`https:someurl/$slug`).
        then(res => res.json()).
        then(data => 
            console.log("data" + data.id);
            changeData(data);
        );
, [slug])

if (currentstatus === 'some status') 
   return (
        <div>
            <div>
                data.id
            </div>
        </div>
    )
 
    return <p>try harder!</p>

【讨论】：

它不起作用。每次遇到 changedata(data) 时，都会调用 useEffect() 并再次陷入无限循环！我已经尝试过您建议的代码。如果console.log无限循环也会有同样的问题。