Fetch JSON使用react状态导致无限循环

Question

JSON是某事列表这:

{
"orders": [
{
id: 123456789,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
id: 789456123,
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}    
]
}

抱歉隐藏了url

代码:

import React, {useEffect, useState} from "react";
import Search from "./components/Search";

function App() {

const [currentURL, setCurrentURL] = useState([]);

let ordersUrl = "MYURL";
useEffect( () => {
fetch(ordersUrl, {headers: {'Content-Type': 'application/json'} }).then((response) => response.json() ).then( data => setCurrentURL(data.orders));
//fetch(url).then((response) => response.json() ).then( data => setCurrentURL(data));
})

const [filter, setFilter] = useState("");
function changeFilter(event){    
// console.log(event.target.value);
setFilter( event.target.value );
}
return (
<div className="App">
<Search onChange={changeFilter}  />
{filter}

{
currentURL.map(x => x && <div>{x.description}</div>)
//currentURL.filter( f => { return f.name.includes(filter);}).map(x => x && <div key={x.id}> {x.name} </div>)
}

{/* filter */}
{/* orders */}
</div>
);
}
export default App;

好的，我可以列出商品描述，没问题。但是当我尝试列出ID时会导致无限循环刷新结果"类似的东西"

有什么想法吗?

Answer 1

您的查询正在更新您的状态成功(setCurrentUrl(data.orders))，这触发React重新渲染组件，这导致您的useEffect()再次触发。

尝试添加一个空的依赖数组到你的useEffect()，这样它只运行第一次(而不是每次更新):

useEffect(
() => { ... stuff ...},
[]
);

你也可以通读这一页，以便更好地理解这里发生的事情。