Arhn - архитектура программирования

Законопослушные перехватчики реакции

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

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

Вот еще немного информации:

У нас есть собственный хук под названием useCommaHook, как показано ниже:

export const useCommaHook = price => {
  const priceArray = price.toString().split("")
  const beforeComma = priceArray.slice(0, 1).join("")
  const afterComma = priceArray.slice(1, 4).join("")
  return `${beforeComma},${afterComma}`
}

Что можно использовать для добавления запятой для валют при рендеринге:

const renderTours = data => {
    return data.map((element, idx) => {
        return (
          <span className="filtered-tour__description-price">
            *** --> We'd like to use our hook here to get comma for every price in the loop***
            {`from ${element.node.priceFrom}`
          </span>
        )
    })
}

Как было сказано выше, мы хотели бы применить этот фильтр ко всем ценам узлов в нашем массиве.

Как бы вы подошли к решению такой проблемы? любая идея приветствуется.


  • Почему бы просто не сделать useCommaHook обычной функцией (без перехвата)? 18.09.2019
  • потому что мы хотели бы повторно использовать в других файлах 18.09.2019

Ответы:


1

useCommaHook не крючок! Он не вызывает никаких собственных хуков (useState, ...). Поэтому правила крючков не применяются.

18.09.2019
  • Это неправильно! согласно официальной документации React - ›Custom Hook - это функция JavaScript, имя которой начинается с" use "и которая может вызывать другие хуки .... Checkout последняя часть может вызывать другие хуки .... 18.09.2019
  • Да, и обычные функции не могут вызывать другие хуки. 18.09.2019
  • Но, тем не менее, лучшим ответом было бы то, почему вы используете вместо этого обычную функцию javascript. 18.09.2019

  • 2

    Создание собственных хуков позволяет извлекать логику компонентов в функции многократного использования. Но здесь ваш useCommaHook - простой функциональный компонент, его функция -

    return `${beforeComma},${afterComma}`
    

    Вы даже не использовали собственные хуки внутри useCommaHook, и в вашей функции нет состояния, поэтому State Hook не применим в вашем коде.

    18.09.2019
    Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..