Javascript 第一次调度导致其他多功能调度触发两次

其中，我将多个分派添加到

useffect（）

，它会导致以下所有事件触发两次。下面的例子

这是完整的代码。按所需的任何其他顺序删除注释

ps.idk如何使其作为代码段运行

pps。我举了一个例子

import React, { useReducer, useEffect } from "react";
const url = `https://picsum.photos/v2/list?page=3&limit=1`;


function reducer(data, action) {
  console.log('reducer triggered', action.type);
  switch (action.type) {
    case "INITIALIZE":
      console.log(action.payload, "Initialize");
      return action.payload;
    case "ADD_NEW":
      const newData = { ...data };
      newData.info = newData.info || [];
      newData.info.push({});
      console.log(newData);
      return newData;
    case "INI2":
      return action.payload;
     case "INI3":
      return action.payload;
    default:
      return
  }
}

function App() {
  const [data, dispatch] = useReducer(reducer, null);

  useEffect(() => {
    //dispatch({type: "INI2"}); // uncommment this to get 2 reducer messages from each below
    console.log("here");  
    fetch(url)
      .then(async response => {
        dispatch({type: "INITIALIZE",payload: (await response.json())});
        //dispatch({type: "INI3"});  // uncomment this to see that every new dispatch is doubled after first one
      })
      .catch(error => {console.log(error);});
  }, []);

  const addNew = () => {
    dispatch({ type: "ADD_NEW" });
  };
  return (
    <>
      <div>{data ? JSON.stringify(data) : "No Data Yet"}</div>
      <button onClick={addNew}>Test</button>
    </>
  );
}

export default App

import React，{useReducer，useffect}来自“React”；
常量url=`https://picsum.photos/v2/list?page=3&limit=1`;
功能减速机（数据、动作）{
console.log（'reducer-tricked'，action.type）；
开关（动作类型）{
案例“初始化”：
console.log（action.payload，“初始化”）；
返回动作。有效载荷；
案例“新增”：
const newData={…data}；
newData.info=newData.info | |[]；
newData.info.push（{}）；
console.log（newData）；
返回新数据；
案例“INI2”：
返回动作。有效载荷；
案例“INI3”：
返回动作。有效载荷；
违约：
返回
}
}
函数App（）{
const[data，dispatch]=useReducer（reducer，null）；
useffect（（）=>{
//dispatch（{type:“INI2”}）；//取消对此的注释，以从下面的每个消息中获取2条reducer消息
console.log（“此处”）；
获取（url）
。然后（异步响应=>{
分派（{type:“INITIALIZE”，有效负载：（wait response.json（））}）；
//分派（{type:“INI3”}）；//取消对此的注释，以查看每个新分派在第一个分派之后加倍
})
.catch（错误=>{console.log（错误）；}）；
}, []);
const addNew=（）=>{
分派（{type:“ADD_NEW”}）；
};
返回(
{data？JSON.stringify（数据）：“还没有数据”}
试验
);
}
导出默认应用程序

这只是应用程序中存在React.StrictMode的结果

根据

严格模式不能自动检测副作用，但它 通过使它们更具确定性，可以帮助您识别它们。 这是通过有意地双重调用函数来实现的

传递给useState、useMemo或useReducer的函数是双重调用的一部分，这就是为什么您在案例中看到这种行为

---

现在我明白了。谢谢如何禁用它？您需要从组件层次结构中删除它。如果您使用CreateReact应用程序，则它必须位于index.js中