反应钩子第一次调度导致其他多次调度触发两次

Question

如果我向useEffect() 添加更多的调度，它会导致以下所有事件触发两次。下面的例子。

这是完整的代码。按您想要的任何其他顺序删除 cmets

ps。 idk如何让它作为代码运行sn-p

pps。我以this question 为例

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

Answer 1

这只是 React.StrictMode 出现在您的应用程序中的结果

根据React Documentation

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

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

Expected Working demo without React.StrictMode