Блог

Главная - Вопросы по программированию - Как я могу использовать свой пользовательский крючок для использования при нажатии кнопки?

Как я могу использовать свой пользовательский крючок для использования при нажатии кнопки?

#javascript #reactjs #react-hooks

#язык JavaScript #реагирует на #реагируют-крючки

Вопрос:

Полу-новичок в реагировании. У меня есть хук useFetch, который использует все мои функции выборки, и я хочу вызвать его, чтобы получить следующую страницу элементов, когда пользователь нажимает кнопку «загрузить больше элементов».

Очевидно,

lt;button onClick={() =gt; { useFetch(...) }}gt;load more itemslt;buttongt; не сработает, потому что я вызываю пользовательский хук внутри обратного вызова. Каков наилучший шаблон в целом для выполнения подобных задач? Я могу вызвать функцию useFetch в самом функциональном компоненте, но затем произойдет выборка, когда компонент монтируется, что на самом деле не то, что я хочу.

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

редактировать: возможно, я понял это, я снова опубликую ответ, если он сработает, и на этот пост не будет ответа

Комментарии:

1.Пользовательские крючки выборки обычно возвращают функцию, вызываемую для выполнения запроса на выборку, а также возвращают статус запроса, включая ошибки. Какова ваша useFetch реализация hook и как ваш код использует ее или пытается использовать?

2. @DrewReese useFetch просто извлекает данные из предоставленного URL-адреса и выполняет попытку улова вместе с проверкой ошибок кода состояния. Он имеет эффект использования, который вызывает определенную функцию fetchData и экспортирует значение данных с отслеживанием состояния. Должен ли я вместо этого просто определить функцию и вернуть функцию, и все? Затем убедитесь, что я извлекаю внутри эффекта использования в файлах, которые его используют?

3. Вы спрашиваете нас, как использовать пользовательский useFetch крючок, которым вы не делитесь с нами, чтобы мы не могли сказать, как его использовать? Или вы спрашиваете о том, как написать пользовательский useFetch крючок, который действительно можно использовать? В любом случае, это не очень понятные вопросы, и нам понадобится больше контекста. Цель пользовательских крючков-инкапсулировать повторно используемый код для использования в компонентах функций React.

Ответ №1:

А! Крючки реагируют.

Одним из способов сделать это было бы определить ваши функции в методе useFetch, которые отвечают за выполнение вызовов API, а затем вернуть эти функции из крючка, которые будут использоваться везде, где вы хотите.

Например, крючок для использования будет выглядеть следующим образом

 const useFetch = () =gt; {  const makeApiCall = () =gt; {};    return {  makeApiCall  } }

а затем внутри вашего компонента

 const Comp = () =gt; {  const { makeApiCall } = useFetch();    return (  lt;Button onClick={makeApiCall} /gt;  ) }

Вы всегда можете передать некоторую релевантную информацию на крючок и вернуть более релевантные данные с крючка.

Комментарии:

1. потрясающе, спасибо, не то, что я имел в виду, но я попробую это сделать

Ответ №2:

Вы не должны вызывать хук из обработчика событий, как вы сами заметили.

Ваш крючок useFetch() обычно не должен извлекать какие-либо данные, а скорее возвращать функцию, которую вы можете вызвать для последующего извлечения данных.

Тогда ваш компонент будет выглядеть примерно так:

 const MyComponent = () =gt; {  const { fetch, data } = useFetch();  return (lt;divgt;  lt;pgt;{data}lt;/pgt;  lt;button onClick={() =gt; fetch()}gt;Load more itemslt;/buttongt;  lt;/divgt;); }

Затем ваш useFetch крючок отвечает за

  • Создание fetch функции.
  • Возвращение data один раз fetch было вызвано и решено.
  • Сохранение data в состоянии и обновление data при fetch повторном вызове.

Вот как useFetch может выглядеть крючок

 function useFetch() {  const [data, setData] = useState();  const fetch = async () =gt; {  const result = await // call to your API, or whereever you get data from  setData(result.data);  };   return { fetch, data }; }

Комментарии:

1. Я немного сбит с толку, должен ли я все еще устанавливать состояние внутри useFetch? У меня есть данные setData, когда я успешно выполняю выборку, должен ли я возвращать их вместе со ссылкой на функцию выборки?

2. Если я правильно понял ваш вопрос, то да, это был бы прекрасный способ сделать это. Я немного отредактирую свой ответ, чтобы отразить это.

3. Я все еще не могу заставить его работать, не могли бы вы дать мне голую реализацию того, как будет выглядеть useFetch, чтобы вышеперечисленное работало?

4. Конечно, я добавил быструю реализацию крючка с голыми костями. Он в основном сохраняет данные в состоянии, создает функцию выборки, которая задает данные при вызове и возвращает как функцию выборки, так и данные. В этом примере данные не определены до тех пор, пока не будет вызвана выборка, но вы можете инициализировать их любыми данными, которые вам нравятся.

5. хм, это вызывает беспокойство. Это все еще не работает для меня. Я использую fetch в эффекте использования, а затем пытаюсь что-то сделать с данными, но они продолжают возвращаться неопределенными. Должен ли я связать соответствующую часть своего кода?

Метки: