使用setData的React useEffects没有进入无限循环

Question

const [resourceType, setResourceType] = useState("posts");
const [data, setData] = useState("");
useEffect(() => {
console.log("use effects called: " + resourceType);
fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
.then((result) => {
return result.json().then((data) => {
return {
data: data,
response: result.status,
};
});
//JSON.parse(result);
})
.then((data) => {
console.log("here");
setData(JSON.stringify(data));
console.log(data);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我有上面的代码，它从JSON占位符URL中获取伪数据，然后更新数据变量(setData(JSON.stringfy(data(((。我的问题是，根据我对useEffect和useState react hook的理解，这个实现应该进入一个无限循环。这是我认为应该发生的事情，页面渲染它调用useEffect它更新数据变量，这将导致组件的重新渲染，该组件应该再次调用useEffect，从而重新呈现组件，然后循环继续。但这并没有发生，useEffect只被调用了两次。为什么会发生这种情况？

Answer 1

第二次调用setData时数据相同，因此：

• react不会重新渲染组件，因此
• 效果不起作用，因此
• 没有无限循环

如果不字符串化数据，您可能会看到一个无限循环。

Answer 2

您需要将data对象作为依赖数组传递给useEffect()

useEffect(() => {
...your code
}, [data]);