Действие отправляется, даже если его нет в компоненте - PullRequest
Новая
       15

Действие отправляется, даже если его нет в компоненте

0 голосов
/ 19 марта 2019

Я играю с реактивными хуками и наткнулся на камень преткновения с помощью редуктора.Я создал простой pinPad, в котором хранится контакт для состояния, затем я сравниваю его с константой и затем направляю на страницу входа, если 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 && 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 Component: 

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>
);

};

1 Ответ

1 голос
/ 19 марта 2019

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

<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

...