警报在反应中出现两次

Question

为什么这个警告框在一个简单的 useReducer 应用程序中出现两次，

单击此处 获取代码和框链接，

重新生成场景

1. 使用向上箭头增加输入值（仅按一次）
2. 通过向下键减少输入的值（仅按一次）

这是代码

import "./styles.css";
import { useReducer } from "react";
const reducerFunction = (state, action) => {
  switch (action.type) {
    case "testing": {
      if (action.payload.value > 0) {
        return { ...state, testing: action.payload.value };
      } else {
        alert("some message");
        return state;
      }
    }
    default: {
      throw new Error("Invalid Action");
    }
  }
};
export default function App() {
  const defaultValue = {
    testing: 0
  };
  const [state, dispatch] = useReducer(reducerFunction, defaultValue);

  return (
    <input
      value={state.testing}
      onChange={(e) => {
        dispatch({ type: "testing", payload: { value: e.target.value } });
      }}
      type="number"
    />
  );
}

Answer 1

您正在使用StrictModewhich 调用useReducer从文档传递给两次的函数：

\n

\n

严格模式可以\xe2\x80\x99t 自动为您检测副作用，但它\n可以通过使副作用更具确定性来帮助您发现它们。\n这是通过有意两次调用以下函数来完成的：

\n

传递给 useState、useMemo 或 useReducer 的函数

\n

\n

// Remove Strict.Mode\nReactDOM.render(\n  <App />,\n  rootElement\n);\n

\n