Блог

Я играю с перехватчиками react и столкнулся с камнем преткновения с useReducer. Я создал простую PINPad, которая сохраняет pin-код для состояния, затем сравнивает его с константой, а затем перенаправляет на страницу входа в систему, если 2 совпадают. (Я знаю, что это не очень сложно!) Я использую useReducer, передающий редуктор:

 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 amp;amp; dispatch({ type: "addDigit", payload: e })
                        }
/>
  

однако, когда я ссылаюсь на «/ LoggedIn», я получаю сообщение «TypeError: buttonAction не является функцией», как будто отправка запускается снова после отрисовки компонента.

Мой маршрутизатор:

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

Я не знаю, почему все, что содержится в компоненте приложения, должно быть отправлено, когда я не отрисовываю компонент приложения, кстати, я могу вручную ввести URL-адрес «/ LoggedIn», и сообщение об ошибке не появляется, так что, похоже, это как-то связано с маршрутизатором.

Компонент 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>
);
  

};

Вам нужно предотвратить событие во время загрузки компонента

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

поскольку вы используете exact / path, даже если вы находитесь на http://localhost:3000
он загрузит компонент приложения, поэтому вместо / использования /home
тогда вы сможете загрузить его только на http://localhost:3000/home