Как обернуть метод в debounce и передать туда параметры в template?

WbICHA, Так как сделать то в итоге? :D Возвращать функцию пробовал, не помогает

Как обернуть метод в debounce и передать туда параметры в template?

Алексей Абрамов, В вашем примере функция не срабатывает. только console.log. и delay не подставляется. : (

Почему не добавляется новый элемент в store?

Спасибо, ваш комментарий помог понять в чем дело. Изменил onClick на этоonClick={() => add(fieldText)} и все заработало

Как правильно перебрать циклом слайды и карточки внутри них?

0xD34F,
Да, не объект, а массив.
Создал codesandbox для удобства.
Там я оставил свое старое решение, чтобы убедиться в корректности массива, а ваше оставил закомментированным. Если его раскомментировать, то покажет ошибку:

TypeError
Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

Как я понял ошибка в том, что пытаюсь итерировать объект, а не массив. Но самостоятельно разобраться как это исправить не могу.

Как правильно перебрать циклом слайды и карточки внутри них?

0xD34F,

я пробую использовать ваш код:

slides.map(([ first, ...rest ]) => (
  <SwiperSlide>
    <div className="slide-row">
      <Card {...first} />
    </div>
    <div className="slide-row">
      {rest.map(n => (
        <div class="slide-col">
          <Card {...n} />
        </div>
      ))}
    </div>
  </SwiperSlide>
))

для этого объекта:

const slides = [
      {
        cards: [
          {
            title: 'Заголовок1',
            category: 'Категория1,
          },
           {
            title: 'Заголовок2',
            category: 'Категория2,
          },
           {
            title: 'Заголовок3',
            category: 'Категория3,
          },
        ],
      },
      {
        cards: [
          {
            title: 'Заголовок4',
            category: 'Категория4,
          },
           {
            title: 'Заголовок5',
            category: 'Категория5,
          },
          {
            title: 'Заголовок6',
            category: 'Категория6,
          },
        ],
      },
]

не понимаю я почему возвращает undefined. Мы в map заходим внутрь массива slides и разделяем карточки на 1 и 2. выглядит то правильно. Отчего undefined?

Как правильно перебрать циклом слайды и карточки внутри них?

0xD34F, undefined is not a function

Как правильно перебрать циклом слайды и карточки внутри них?

0xD34F, функция точно верная? возвращает такую ошибку:

Как правильно перебрать циклом слайды и карточки внутри них?

0xD34F, то что нужно, спасибо!

Как правильно перебрать циклом слайды и карточки внутри них?

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

Вот структура, которая должна быть на выходе

<SwiperSlide1 className='slide1'>
  <div className='slide-row'>
    <Card1 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card2 />
    </div>
    <div className='slide-col'>
      <Card3 />
    </div>
  </div>
</SwiperSlide1>
<SwiperSlide2 className='slide2'>
  <div className='slide-row'>
    <Card4 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card5 />
    </div>
    <div className='slide-col'>
      <Card6 />
    </div>
  </div>
</SwiperSlide2>

То есть первая карточка попадает внутрь строки, а следующие 2 попадают в столбцы внутри следующей строки.

Пока я сделал следующим образом:
1. переписал объект с данными таким образом, чтобы проще было перебирать

объект

const slides = [
      {
        cards: [
          {
            title: 'Заголовок1',
            category: 'Категория1,
          },
           {
            title: 'Заголовок2',
            category: 'Категория2,
          },
           {
            title: 'Заголовок3',
            category: 'Категория3,
          },
        ],
      },
      {
        cards: [
          {
            title: 'Заголовок4',
            category: 'Категория4,
          },
           {
            title: 'Заголовок5',
            category: 'Категория5,
          },
          {
            title: 'Заголовок6',
            category: 'Категория6,
          },
        ],
      },
]

2. Функцию пока оставил с прямым указанием карточек в слайде, лучше ничего не придумал.

Функция

{data.slides.map((slide) => {
            return (
              <SwiperSlide>
                <div className='slide-row'>
                  <StyleCard data={slide.items[0]} />
                </div>
                <div className='slide-row'>
                  <div className='lide-col'>
                    <StyleCard data={slide.items[1]} />
                  </div>
                  <div className='slide-col'>
                    <StyleCard data={slide.items[2]} />
                  </div>
                </div>
              </SwiperSlide>
            );
          })}

Эта html структура сильно ввела в ступор...

Как правильно перебрать циклом слайды и карточки внутри них?

alex4answ,
Объект с данными можно сделать другим, например добавить еще промежуточный массив со слайдами, не суть, главное результат.
результат должен быть таким:

<SwiperSlide1 className='slide1'>
  <div className='slide-row'>
    <Card1 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card2 />
    </div>
    <div className='slide-col'>
      <Card3 />
    </div>
  </div>
</SwiperSlide1>
<SwiperSlide2 className='slide2'>
  <div className='slide-row'>
    <Card4 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card5 />
    </div>
    <div className='slide-col'>
      <Card6 />
    </div>
  </div>
</SwiperSlide2>

Почему не удается получить данные с помощью fetch с localhost?

Надим Закиров, получилось решить. Сначала поправил путь, 404 пропала, но вывод в консоли html остался. В документации next js нашел пример использования rest router api, там после объекта с данными была такая запись:

export default function handler(req, res) {
  res.status(200).json(product)
}

Сам запрос:

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:3000/api/product`)
  const data = await res.json()
  return {
    props: {product} 
  }
}

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

Почему не удается получить данные с помощью fetch с localhost?

Надим Закиров, ввел.

Вот ответ

Выходит и правда что в ответе html, как сказали Василий и Kovalsky. Как это можно поправить? Формат json точно верный (ради эксперимента вставил другой json, ответ тот же).

Почему useEffect не срабатыает при перезагрузке страницы?

Спасибо за ответ! Готовое решение решило мою проблему, но я не понял вторую ошибку, вероятно из-за недостаточных знаний в js. Можете привести отрывок из моего кода, где isMobile замыкается?

Как синхронизировать input и range slider?

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

https://codesandbox.io/s/admiring-hamilton-i52t0?f...

Почему возникает ошибка в функции передачи индекса картинки в лайтбоксе?

0xD34F, косяк нашел, благодарю. Переменную тоже поправил.

Почему возникает ошибка в функции передачи индекса картинки в лайтбоксе?

Здравстуйте, спасибо за помощь.

Потому что вы не видите разницы между функцией и результатом её вызова.

Точно, этот момент понял. Исправил, следуя вашему примеру, но все-равно не работает - показывает пустой лайтбокс. Что я еще упускаю?
https://codesandbox.io/s/elastic-voice-7nynb?file=...

Как в React по клику вне элемента менять его класс?

Спасибо, помогло! Элемент должен скрываться только через стилизацию. Наверное, когда я пытался этого добиться, забыл убрать изменение через условный рендерниг.

Как в реакт вешать разный онклик в зависимости от текущего state?

Спасибо, это помогло. После столкнулся со следующей проблемой: сразу под header, где находится бургер, у меня слайдер во всю страницу (swiper react) и по неизвестной причине когда кликаю в области компонента слайдера clickOutside не работает, вообще непонятно почему. Попробую поискать другие решения обработки внешних кликов.

Что означает ошибка при отправке почты и как ее исправить?

Спасибо, по вашей наводке решение проблемы заняло минуту.
забыл добавить метод: $mail->Body = $body;

Почему возникает ошибка при отправке формы на почту?

нашел где логи с сервера смотреть, вот что там:
chipdip33.ru [Mon Dec 28 21:51:24 2020] [php7:error] [pid 897436] [client 95.106.199.138:0] PHP Fatal error: Uncaught Error: Call to undefined method PHPMailer\\PHPMailer\\PHPMailer::addAdress() in /home/m/milan7457y/public_html/mail.php:14\nStack trace:\n#0 {main}\n thrown in /home/m/milan7457y/public_html/mail.php on line 14, referer: https://chipdip33.ru/

Вот

структура проекта, index и mail.php в корне лежат.

Как понял, ему не нравится addAdress, но что с ним не так?