UseEffect被多次调用 [英] UseEffect being called multiple times

问题描述

我认为useeffect仅在渲染之后被调用一次，但是它被执行了多次，而不是按照我期望的顺序执行.我希望在获取过程中将其发送到味精数据加载"，然后一旦获取完成，则渲染标题字段并发出"..完成..."警报.一次，那应该是结局.我在两点添加了ALERT和控制台日志来确定流量，并且警报和控制台日志都以不同的顺序出现多次.您能否运行此代码并查看其行为.我将第二个参数数组保留为null，以使其仅运行一次，但无济于事.

I thought useeffect is called once only after render, but its 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 log 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 behavior. I kept the 2nd argument array as null to make it run once only but does not help.

第二，请说明反应RENDER是否表示在屏幕上显示?LOAD指示哪个阶段?显示何时完成?

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

代码如下:

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;

感谢您的帮助，

推荐答案

您的 useEffect 在每个渲染周期仅执行一次 ，但是您的 useEffect 会导致重新渲染.因此，您会收到很多警报.

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.

查看代码演示，查看console.logs以及评论

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

还请注意， useEffect 将

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

• 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 provide any dependency.

在重新渲染时阅读此处

这篇关于UseEffect被多次调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！