[英]UseEffect being called multiple times
我认为useEffect
仅在渲染后调用一次,但它被执行多次,而不是按我预期的顺序执行。
我希望它在提取过程中发送消息“数据加载”,然后一旦完成提取,呈现标题字段并警告“..Done ...”一次,这应该是结束。
我在这两个点添加了 ALERT 和控制台日志以确定流程,并且警报和控制台日志都以不同的顺序出现不止一次。 您能否运行此代码并查看行为。 我将第二个参数数组保留为 null 以使其仅运行一次但无济于事。
请澄清反应渲染是否意味着在屏幕上显示? LOAD表示什么阶段? 什么时候显示完成?
代码如下:
import React, { useEffect, useState } from "react";
//import "./App.css";
function DemoFetchZ() {
let data = { title: "Waiting for Data" };
const [todo, setTodo] = useState(data);
const [isData, setData] = useState(false);
const [isFetching, setFetching] = useState(false);
useEffect(() => { // called after the first render
async function fetchData() {
setFetching(true);
const response = await fetch(
"https://jsonplaceholder.typicode.com/todos/1"
);
console.log("response = ", response);
let data = await response.json();
setTodo(data); //updt state
setFetching(false);
setData(true)
console.log("Data = ", data);
}
fetchData();
}, []); //[isData] null value will execute once only?
if (isFetching) {
console.log("data loading ......")
alert ("data loading")
return (<div>...Data Loading.....</div>);
}
return (
<div>
- Fetch
<br /> {alert("..DONE...")}
<span>Title: {todo.title}</span>
</div>
);
}
export default DemoFetchZ;
像这样重构它。
import React, { useEffect, useState } from "react";
//import "./App.css";
const DemoFetchZ = () => {
const [todo, setTodo] = useState({});
const [loading, setLoading] = useState(false);
useEffect(() => {
fetchData();
}, []);
const fetchData = () => {
setLoading(true);
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((data) => {
setTodo(data);
setLoading(false);
})
.catch((error) => {
console.log(error);
setLoading(false);
});
};
return (
<>
{loading ? (
<div>...Data Loading.....</div>
) : (
<div>
- Fetch
<br />
<span>Title: {todo ? todo.title : "no Title Found"}</span>
</div>
)}
</>
);
};
export default DemoFetchZ;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.