React useFormStatus: Овладяване на проследяването на напредъка при изпращане на формуляри

В съвременната уеб разработка предоставянето на безпроблемно и информативно потребителско изживяване по време на изпращания на формуляри е от решаващо значение. Куката useFormStatus на React, въведена в React 18, предлага мощно и елегантно решение за проследяване на състоянието на изпращане на формуляр. Това изчерпателно ръководство ще се задълбочи в тънкостите на useFormStatus, като проучи неговите функционалности, случаи на употреба и най-добри практики за създаване на ангажиращи и отзивчиви взаимодействия с формуляри.

Какво представлява React useFormStatus?

useFormStatus е React кука, предназначена да предоставя информация за състоянието на изпращане на формуляр. Тя опростява процеса на управление и показване на напредъка при изпращане, обработка на грешки и съответно актуализиране на потребителския интерфейс. Преди нейното въвеждане разработчиците често разчитаха на ръчно управление на състоянието и асинхронни операции, което може да доведе до сложен и предразположен към грешки код.

Куката връща обект със следните свойства:

• pending: Булева стойност, показваща дали формулярът в момента се изпраща.
• data: Данните, изпратени от формуляра, ако са налични.
• method: HTTP методът, използван за изпращане на формуляра (напр. "POST", "GET").
• action: Функцията или URL адреса, който обработва изпращането на формуляра.
• error: Обект за грешка, ако изпращането е неуспешно. Това ви позволява да показвате съобщения за грешки на потребителя.

Защо да използвате useFormStatus? Предимства и предимства

Използването на useFormStatus предлага няколко ключови предимства:

• Опростено управление на състоянието на формуляра: Централизира управлението на състоянието на изпращане на формуляра, намалявайки примерния код и подобрявайки поддръжката.
• Подобрено потребителско изживяване: Предоставя ясен и последователен начин за показване на напредъка при изпращането на потребителя, подобрявайки ангажираността и намалявайки разочарованието.
• Подобрена обработка на грешки: Опростява откриването и отчитането на грешки, което позволява елегантно обработване на неуспешни изпращания.
• Декларативен подход: Насърчава по-декларативен стил на кодиране, което прави кода по-лесен за четене и разбиране.
• Интеграция със сървърни действия: Безпроблемно се интегрира със React Server Actions, допълнително рационализирайки обработката на формуляри в приложения, които се рендират на сървъра.

Основна употреба: Прост пример

Нека започнем с основен пример, за да илюстрираме основното използване на useFormStatus.

Сценарий: Прост формуляр за контакт

Представете си прост формуляр за контакт с полета за име, имейл и съобщение. Искаме да покажем индикатор за зареждане, докато формулярът се изпраща, и да покажем съобщение за грешка, ако изпращането е неуспешно.

Пример за код

Първо, нека дефинираме просто сървърно действие (обикновено това би било в отделен файл, но е включено тук за пълнота):

async function submitForm(formData) {
  'use server';
  // Симулирайте забавяне, за да демонстрирате състоянието "pending".
  await new Promise(resolve => setTimeout(resolve, 2000));

  // Симулирайте потенциална грешка.
  const name = formData.get('name');
  if (name === 'error') {
    throw new Error('Симулирана грешка при изпращане.');
  }

  console.log('Формулярът е изпратен успешно:', formData);
  return { message: 'Формулярът е изпратен успешно!' };
}

Сега нека създадем React компонента, използвайки useFormStatus:

'use client';

import { useFormStatus } from 'react-dom';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Име:
        
      
      

        Имейл:
        
      
      

        Съобщение:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Изпращане...' : 'Изпрати'}
      </button>
      {error && <p style={{ color: 'red' }}>Грешка: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<h3>Обяснение</h3>

<ul>
  <li>Импортираме <code>useFormStatus</code> от <code>'react-dom'</code>. Забележете, че това е клиентски компонент, тъй като използва кука от страна на клиента.</li>
  <li>Ние извикваме <code>useFormStatus()</code> в рамките на компонента <code>ContactForm</code>, за да получим стойностите <code>pending</code>, <code>data</code> и <code>error</code>.</li>
  <li>Стойността <code>pending</code> се използва за деактивиране на бутона за изпращане и показване на съобщение "Изпращане...", докато формулярът се изпраща.</li>
  <li>Ако възникне <code>error</code>, неговото съобщение се показва в червен параграф.</li>
  <li>Ако <code>data</code> се върне от сървърното действие, показваме съобщение за успех.</li>
</ul>

<h2>Разширени случаи на употреба и техники</h2>

<p>Освен основния пример, <code>useFormStatus</code> може да се използва в по-сложни сценарии за подобряване на потребителското изживяване и обработка на различни изисквания за изпращане на формуляри.</p>

<h3>1. Персонализирани индикатори за зареждане и анимации</h3>

<p>Вместо обикновен текст "Изпращане...", можете да използвате персонализирани индикатори за зареждане или анимации, за да осигурите по-визуално привлекателно изживяване. Например, можете да използвате компонент за въртене или лента за напредък.</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... fields form ... */}
      <button type="submit" disabled={pending}>
        {pending ? <Spinner /> : 'Изпрати'}
      </button>
      {error && <p style={{ color: 'red' }}>Грешка: {error.message}</p>}
    </form>
  );
}

function Spinner() {
  return <div>Зареждане...</div>; // Заменете с вашия компонент за въртене
}
</code>
</pre>

<h3>2. Оптимистични актуализации</h3>

<p>Оптимистичните актуализации предоставят незабавна обратна връзка на потребителя, като актуализират потребителския интерфейс, сякаш изпращането на формуляра е било успешно, дори преди да получи потвърждение от сървъра. Това може значително да подобри възприеманата производителност на вашето приложение.</p>

<p><b>Забележка:</b> Оптимистичните актуализации изискват внимателно обмисляне на обработката на грешки и последователността на данните. Ако изпращането е неуспешно, трябва да върнете потребителския интерфейс в предишното му състояние.</p>

<h3>3. Обработка на различни сценарии за грешки</h3>

<p>Свойството <code>error</code>, върнато от <code>useFormStatus</code>, ви позволява да обработвате различни сценарии за грешки, като грешки при валидиране, мрежови грешки и грешки от страна на сървъра. Можете да използвате условно рендиране, за да покажете конкретни съобщения за грешки въз основа на типа грешка.</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... fields form ... */}
      <button type="submit" disabled={pending}>
        {pending ? 'Изпращане...' : 'Изпрати'}
      </button>
      {error && error.message === 'Validation Error' && (
        <p style={{ color: 'red' }}>Моля, коригирайте грешките при валидиране.</p>
      )}
      {error && error.message === 'Network Error' && (
        <p style={{ color: 'red' }}>Възникна мрежова грешка. Моля, опитайте отново по-късно.</p>
      )}
      {error && error.message !== 'Validation Error' && error.message !== 'Network Error' && (
        <p style={{ color: 'red' }}>Възникна неочаквана грешка.</p>
      )}
    </form>
  );
}
</code>
</pre>

<h3>4. Интегриране с библиотеки за формуляри от трети страни</h3>

<p>Докато <code>useFormStatus</code> предоставя прост начин за проследяване на състоянието на изпращане на формуляри, може да искате да го интегрирате с по-изчерпателни библиотеки за формуляри като Formik или React Hook Form. Тези библиотеки предлагат разширени функции като валидиране, управление на състоянието на формуляра и обработка на изпращане.</p>

<p>Можете да използвате <code>useFormStatus</code>, за да увеличите тези библиотеки, като предоставите последователен начин за показване на напредъка при изпращане и обработка на грешки.</p>

<h3>5. Ленти за напредък и проценти</h3>

<p>За дълготрайни изпращания на формуляри, показването на лента за напредък или процент може да предостави ценна обратна връзка на потребителя и да го задържи ангажиран. Докато `useFormStatus` не ви дава директно напредък, можете да го комбинирате със сървърно действие, което отчита напредъка (напр. чрез събития, изпратени от сървъра, или уеб сокети).</p>

<h2>Най-добри практики за използване на useFormStatus</h2>

<p>За да използвате ефективно <code>useFormStatus</code> и да създадете надеждно и удобно за потребителя изживяване с формуляри, помислете за следните най-добри практики:</p>

<ul>
  <li><b>Осигурете ясна визуална обратна връзка:</b> Винаги предоставяйте визуална обратна връзка на потребителя по време на изпращане на формуляра, като индикатор за зареждане, лента за напредък или съобщение за състоянието.</li>
  <li><b>Обработвайте грешките грациозно:</b> Реализирайте надеждна обработка на грешки, за да откривате и отчитате неуспешни изпращания, предоставяйки информативни съобщения за грешки на потребителя.</li>
  <li><b>Помислете за достъпност:</b> Уверете се, че вашите взаимодействия с формуляри са достъпни за потребители с увреждания, като предоставяте подходящи ARIA атрибути и поддръжка за навигация с клавиатурата.</li>
  <li><b>Оптимизирайте производителността:</b> Избягвайте ненужни повторни рендирания, като мемоизирате компоненти и оптимизирате извличането на данни.</li>
  <li><b>Тествайте щателно:</b> Тествайте щателно взаимодействията с формулярите си, за да се уверите, че те работят според очакванията в различни сценарии и среди.</li>
</ul>

<h2>useFormStatus и Server Actions</h2>

<p><code>useFormStatus</code> е проектиран да работи безпроблемно с React Server Actions, мощна функция за обработка на изпращания на формуляри директно на сървъра. Сървърните действия ви позволяват да дефинирате функции от страна на сървъра, които могат да бъдат извикани директно от вашите React компоненти, без необходимост от отделна API крайна точка.</p>

<p>Когато се използва със Server Actions, <code>useFormStatus</code> автоматично проследява състоянието на изпращане на действието, предоставяйки прост и последователен начин за управление на взаимодействията с формулярите.</p>

<h2>Сравнение с традиционната обработка на формуляри</h2>

<p>Преди <code>useFormStatus</code>, разработчиците често разчитаха на ръчно управление на състоянието и асинхронни операции за обработка на изпращания на формуляри. Този подход обикновено включваше следните стъпки:</p>

<ul>
  <li>Създаване на променлива за състоянието за проследяване на състоянието на изпращане (напр. <code>isSubmitting</code>).</li>
  <li>Писане на обработчик на събития за обработка на изпращането на формуляра.</li>
  <li>Извършване на асинхронна заявка към сървъра.</li>
  <li>Актуализиране на състоянието въз основа на отговора от сървъра.</li>
  <li>Обработка на грешки и показване на съобщения за грешки.</li>
</ul>

<p>Този подход може да бъде тромав и предразположен към грешки, особено за сложни формуляри с множество полета и правила за валидиране. <code>useFormStatus</code> опростява този процес, като предоставя декларативен и централизиран начин за управление на състоянието на изпращане на формуляри.</p>

<h2>Реални примери и случаи на употреба</h2>

<p><code>useFormStatus</code> може да се приложи към широка гама от реални сценарии, включително:</p>

<ul>
  <li><b>Формуляри за плащане в електронната търговия:</b> Показване на индикатор за зареждане по време на обработка на информация за плащане.</li>
  <li><b>Формуляри за регистрация на потребители:</b> Валидиране на потребителски въвеждания и обработка на създаването на акаунти.</li>
  <li><b>Системи за управление на съдържанието:</b> Изпращане на статии, публикации в блогове и друго съдържание.</li>
  <li><b>Платформи за социални медии:</b> Публикуване на коментари, харесване на публикации и споделяне на съдържание.</li>
  <li><b>Финансови приложения:</b> Обработка на транзакции, управление на акаунти и генериране на отчети.</li>
</ul>

<h2>Заключение</h2>

<p>Куката <code>useFormStatus</code> на React е ценен инструмент за управление на напредъка при изпращане на формуляри и подобряване на потребителското изживяване в съвременните уеб приложения. Чрез опростяване на управлението на състоянието на формуляра, подобряване на обработката на грешки и предоставяне на декларативен подход, <code>useFormStatus</code> дава възможност на разработчиците да създават по-ангажиращи и отзивчиви взаимодействия с формуляри. Като разбирате неговите функционалности, случаи на употреба и най-добри практики, можете да използвате <code>useFormStatus</code>, за да изградите стабилни и удобни за потребителя формуляри, които отговарят на изискванията на днешния пейзаж за уеб разработка.</p>

<p>Докато изследвате <code>useFormStatus</code>, не забравяйте да обмислите достъпността, оптимизацията на производителността и задълбоченото тестване, за да гарантирате, че вашите формуляри са функционални и удобни за потребителя за глобална аудитория. Чрез прилагането на тези принципи можете да създадете взаимодействия с формуляри, които са безпроблемни, информативни и ангажиращи, като в крайна сметка допринасяте за по-добро цялостно потребителско изживяване.</p>

<p>Тази статия предостави изчерпателен преглед на <code>useFormStatus</code>. Не забравяйте да се консултирате с официалната документация на React за най-актуалната информация и подробности за API. Приятно кодиране!</p>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">изпращане на формуляр</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">напредък на формуляра</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">състояние в очакване</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">обработка на грешки</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React куки</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">уеб разработка</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">предна разработка</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">потребителско изживяване</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UX</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>