UseEffect 被多次调用

我以为 useEffect 只在渲染后调用一次，但它被执行了多次，而且不是按照我预期的顺序.

我希望它在提取过程中发送消息数据加载"，然后在提取完成后，呈现标题字段并提醒..完成..."一次就结束了.

我在两个点​​添加了 ALERT 和控制台日志以确定流程，并且警报和控制台日志都以不同的顺序出现不止一次.您能否运行此代码并查看行为.我将第二个参数数组保留为 null 以使其仅运行一次但没有帮助.

请澄清反应 RENDER 是否意味着在屏幕上显示?LOAD表示什么阶段?什么时候展示?

代码如下:

import React, { useEffect, useState } from "react";//导入./App.css";函数 DemoFetchZ() {让数据= {标题:等待数据"；};const [todo, setTodo] = useState(data);常量 [isData, setData] = useState(false);const [isFetching, setFetching] = useState(false);useEffect(() => {//在第一次渲染后调用异步函数 fetchData() {setFetching(true);常量响应 = 等待获取(https://jsonplaceholder.typicode.com/todos/1");console.log("response = ", response);让数据 = 等待 response.json();设置待办事项(数据)；//更新状态setFetching(假);设置数据(真)console.log("Data = ", data);}获取数据()；}, []);//[isData] null 值只会执行一次?if (isFetching) {console.log("数据加载......")警报(数据加载")return (<div>...数据加载中.....</div>);}返回 (
- 拿来<br/>{警报(..完成...")}<span>标题:{todo.title}</span></div>);}导出默认DemoFetchZ；

解决方案

你的 useEffect 每个渲染周期只执行一次，但是你的 useEffect 有几个状态更新code>useEffect 导致重新渲染.因此，您会收到很多警报.

查看您的代码演示并查看 console.logs 以及评论

还要注意 useEffect 会

• 当你提供空数组依赖时，你的 useEffect 执行一次
• 当您将某些值作为依赖项(例如:[name])时，您的 useEffect 在名称状态/属性更改时执行
• 如果你不传递依赖数组，useEffect 会在每次重新渲染时执行.

阅读此处重新渲染

I thought useEffect is called once only after render, but it's being executed multiple times and not in the order I expected.

I expected it to msg 'data loading' while the fetch is in progress and then once fetch is done, render the title field and alert "..Done..." once and that should be the end.

I added ALERT and console logs at the two points to determine the flow and both alerts and console logs appear more than once and in different orders. Could you kindly run this code and see the behaviour. I kept the 2nd argument array as null to make it run once only but does not help.

Please clarify if react RENDER means DISPLAY on screen? what stage does LOAD indicate? When is the display done?

code follows:

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;

解决方案

Your useEffect is executed only once per render cycle, but you have several state updates in your useEffect which cause a re-render. Hence you get a lot of alerts.

See a demo of your code and see the console.logs as well as comments

Also note that useEffect will

• when you provide empty array dependency, your useEffect execute once
• when you some value as dependency (eg: [name] ), your useEffect execute when name state/prop changes
• useEffect executes on every re-render if you don't pass the dependency array.

Read here on re-render