即使不在组件中，就可以派遣操作

Question

我正在与React Hook一起玩，并遇到了用UserDucer的绊脚石。我创建了一个简单的PINPAD，该PINPAD存储一个销钉，然后将其与常数进行比较，然后将其路由到登录页面，如果2匹配。（我知道它不是精致的！）我正在使用用户ducer通过还原器：

function reducer(state, action) {
    switch (action.type) {
        case "addDigit":
            return state + action.payload;
        case "reset":
            return "";
        default:
            throw new Error();
    }
}

。目前，我尚未实现PIN检查，而是使用组件链接到"/loggedin"页面。

const [state, dispatch] = useReducer(reducer, "");

然后：

<KeyDigit
    digit={v}
    key={v}
    className="keyDigit number"
    buttonAction={e =>
        state.length < 4 && dispatch({ type: "addDigit", payload: e })
                        }
/>

但是，当我链接到"/loggedin"时，我会收到" typeError：buttrotaction不是函数"消息，好像在呈现组件后再次启动调度。

我的路由器：

<Router>
    <div>
        <Route exact path="/" component={App} />
        <Route path="/LoggedIn" component={LoggedIn} />
    </div>
</Router>

我不知道为什么当我不呈现应用程序组件时，应该派发应用程序组件中包含的任何内容，顺便说一句，我可以手动输入"/loggedin"的URL，并且错误消息没有发生了，这似乎与路由器有关。

keyDigit组件：

const KeyDigit = ({ digit, className, children, buttonAction }) => {
let id = `id-${digit}`;
return (
    <div
        className={className}
        id={id}
        onClick={e => {
            buttonAction(digit);
        }}
    >
        <svg
            width="100%"
            height="100%"
            viewBox="0 0 141 141"
            xmlns="http://www.w3.org/2000/svg"
        >
            <circle cx="70" cy="70" r="67" className="key keyNumber" />
        </svg>
        <span className="keyDigitNumber">{digit}</span>
        <div className="keyDigitNumber">{children}</div>
    </div>
);

};

Answer 1

您需要在加载组件时防止事件

<KeyDigit
        digit={v}
        key={v}
        className="keyDigit number"
        buttonAction={e => {
            e.preventDefault();
            state.length < 4 && dispatch({ type: "addDigit", payload: e })
                            }}
    />

当您使用exact /路径时，即使您在http://localhost:3000上它将加载应用程序组件，因此而不是/使用/home然后，您只能将其加载到http://localhost:3000/home