Пользовательский хук React не определен

Question 1

Очень новичок в React, пытался разобраться в специальных хуках и все время заходил в тупик. Вот мои последние новости, надеюсь, кто-нибудь поможет мне разобраться в том, что я вижу.

Я использую очень итеративный подход к созданию функционального пользовательского хука. Сейчас у меня есть следующее:

Пользовательский крючок:

const useHandleDeleteClick = () => {
    
    console.log('custom hook');
    return;

};

export default useHandleDeleteClick;

Компонентный код:

import { useParams} from "react-router-dom";
import useHandleDeleteClick from "./useCustomHookFile";

const ItemDetails = () => {
    const { customerId, id } = useParams();
    const handleDeleteClick = useHandleDeleteClick();
    console.log(handleDeleteClick);
        
    return (        
        <a href='#' onClick={() => handleDeleteClick()}>
            Do stuff
        </a>
    );
    
}
 
export default ItemDetails;

Два вопроса:

Я вижу, что onClick ссылки «Сделать что-нибудь» вызывается, когда страница загружается/отображается. Есть ли способ предотвратить это?
handleDeleteClick не определен, и я действительно не понимаю, почему onClick фактически ничего не делает.

Если я смогу правильно подключить это, я смогу начать встраивать фактически желаемую функциональность.

Любая помощь приветствуется. Заранее спасибо!

javascript reactjs react-hooks

0

r0ddy 16 Сен 2023 в 20:59

1. Это не так. 2. Ваш собственный хук ничего не возвращает — return;. Вот почему handleDeleteClick — это undefined. Попробуйте return () => console.log('click');.

–

Ori Drori

16 Сен 2023 в 21:06

Answer

Давайте рассмотрим ваш код и решим упомянутые вами проблемы:

OnClick вызывается при загрузке страницы: этого не происходит из-за вашей реализации onClick. Фактически, ваш onClick правильно настроен на вызов функции handleDeleteClick только при нажатии на ссылку. Если вы видите, что что-то происходит при загрузке, это может быть связано с другой частью вашего кода или приложения.

HandleDeleteClick не определен: это связано с тем, что ваш собственный хук useHandleDeleteClick возвращает неопределенное значение. Когда вы используете оператор return без значения в JavaScript, он возвращает неопределенное значение.

Чтобы это исправить, вам нужно убедиться, что ваш собственный хук возвращает функцию. Вот как вы можете изменить свой собственный хук:

const useHandleDeleteClick = () => {
    const handleDelete = () => {
        console.log('Deleted!');
        // Add your delete logic here
    }
    
    console.log('custom hook');
    return handleDelete;
};

Теперь ваш handleDeleteClick будет функцией, которая регистрирует «Удален!» на консоль при вызове.

Код вашего компонента теперь должен работать как положено:

import { useParams } from "react-router-dom";
import useHandleDeleteClick from "./useCustomHookFile";

const ItemDetails = () => {
    const { customerId, id } = useParams();
    const handleDeleteClick = useHandleDeleteClick();
    console.log(handleDeleteClick);
        
    return (        
        <a href='#' onClick={handleDeleteClick}>
            Do stuff
        </a>
    );
    
}
 
export default ItemDetails;

0

JJY9 16 Сен 2023 в 21:08

Question 2

Давайте рассмотрим ваш код и решим упомянутые вами проблемы:

OnClick вызывается при загрузке страницы: этого не происходит из-за вашей реализации onClick. Фактически, ваш onClick правильно настроен на вызов функции handleDeleteClick только при нажатии на ссылку. Если вы видите, что что-то происходит при загрузке, это может быть связано с другой частью вашего кода или приложения.

HandleDeleteClick не определен: это связано с тем, что ваш собственный хук useHandleDeleteClick возвращает неопределенное значение. Когда вы используете оператор return без значения в JavaScript, он возвращает неопределенное значение.

Чтобы это исправить, вам нужно убедиться, что ваш собственный хук возвращает функцию. Вот как вы можете изменить свой собственный хук:

const useHandleDeleteClick = () => {
    const handleDelete = () => {
        console.log('Deleted!');
        // Add your delete logic here
    }
    
    console.log('custom hook');
    return handleDelete;
};

Теперь ваш handleDeleteClick будет функцией, которая регистрирует «Удален!» на консоль при вызове.

Код вашего компонента теперь должен работать как положено:

import { useParams } from "react-router-dom";
import useHandleDeleteClick from "./useCustomHookFile";

const ItemDetails = () => {
    const { customerId, id } = useParams();
    const handleDeleteClick = useHandleDeleteClick();
    console.log(handleDeleteClick);
        
    return (        
        <a href='#' onClick={handleDeleteClick}>
            Do stuff
        </a>
    );
    
}
 
export default ItemDetails;

0

JJY9 16 Сен 2023 в 21:08

Пользовательский хук React не определен

1 ответ

Похожие вопросы

Новые вопросы

javascript