我有一个简单的反应功能组件。
代码应该是不言自明的。如果状态等于'some status',则转到一个 URL,获取一些信息,并将组件的状态设置为已获取的信息。在return()上只显示信息。一切正常,显示数据的 id。但是,当我打开开发工具并进行检查时,console.log("data"+data.id);无限期运行。我想知道是什么让它无限期地运行。
如果我从提取中删除更改数据(数据),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>
)
}
}