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

Question

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

代码应该是不言自明的。如果状态等于“某些状态”，则转到一个 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>
    )
}

}

Answer 1

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

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

Answer 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);
    });

}},[])

Answer 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>
}