React experimental_useFormStatus: Овладяване на проследяването на статуса на грешки във форми

Постоянно развиващата се среда на React непрекъснато въвежда функции, целящи да опростят разработката и да подобрят потребителското изживяване. Едно такова скорошно допълнение, което в момента е в експериментална фаза, е hook-ът experimental_useFormStatus. Този мощен инструмент предоставя оптимизиран начин за проследяване на статуса на изпращане на форми, включително състояния на грешки, директно във вашите React компоненти. Тази статия предоставя изчерпателно ръководство за разбиране и ефективно използване на experimental_useFormStatus за изграждане на стабилни и лесни за употреба форми.

Разбиране на необходимостта от experimental_useFormStatus

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

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

Какво е experimental_useFormStatus?

experimental_useFormStatus е React hook, специално проектиран да предоставя информация за статуса на изпращане на форма. Той работи съвместно с атрибута action на елемента <form> и сървърните действия (server actions) - друга сравнително нова функция на React. Когато форма с action, който сочи към сървърно действие, бъде изпратена, experimental_useFormStatus предоставя данни за текущото състояние на това изпращане.

По-конкретно, hook-ът връща обект, съдържащ следните свойства:

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

Как да използваме experimental_useFormStatus

Нека разгледаме практически пример, за да илюстрираме как да използваме experimental_useFormStatus. Ще създадем проста форма за контакт с полета за име, имейл и съобщение и ще демонстрираме как да използваме hook-а за показване на индикатори за зареждане и съобщения за грешки.

Предпоставки

Преди да започнем, уверете се, че имате настроен React проект и използвате версия на React, която поддържа експериментални функции. Може да се наложи да активирате експерименталните функции във вашия файл react.config.js (или еквивалентна конфигурация за вашия инструмент за изграждане). Също така се уверете, че имате бекенд (напр. Node.js с Express), конфигуриран да обработва изпращането на формата и да връща подходящи отговори.

Пример: Форма за контакт

Ето кода на React компонента:

import React, { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'Form submission failed');
    }

    // Обработка на успешно изпращане (напр. пренасочване, показване на съобщение за успех)
    console.log('Form submitted successfully!');
    // В реално приложение тук може да пренасочите или да актуализирате състоянието
    return { success: true, message: 'Form submitted successfully!' };

  } catch (error) {
    console.error('Error submitting form:', error);
    return { success: false, message: error.message };
  }
}

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

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

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    

      

        Име:
        
      
      

        Имейл:
        
      
      

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

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

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

<ol>
  <li><b>Импортиране на <code>useFormStatus</code>:</b> Импортираме hook-а <code>experimental_useFormStatus</code> от <code>react-dom</code>. Не забравяйте, че това е експериментална функция, така че пътят за импортиране може да се промени в бъдещи версии на React.</li>
  <li><b>Състояние на формата:</b> Променлива на състоянието <code>formData</code>, използваща <code>useState</code>, следи името, имейла и съобщението, въведени от потребителя.</li>
  <li><b>Hook-ът <code>useFormStatus</code>:</b> Извикваме <code>useFormStatus()</code> в рамките на компонента. Този hook автоматично предоставя информация за статуса на изпращане на формата, когато тя се изпраща чрез сървърно действие.</li>
  <li><b>Достъп до свойствата на статуса:</b> Извличаме <code>pending</code>, <code>data</code> и <code>error</code> от обекта, върнат от <code>useFormStatus()</code>.</li>
  <li><b>Индикатор за зареждане:</b> Използваме булевата променлива <code>pending</code>, за да покажем условно съобщение „Изпращане...“ на бутона за изпращане и да го деактивираме, за да предотвратим многократни изпращания.</li>
  <li><b>Обработка на грешки:</b> Ако възникне грешка по време на изпращането на формата (както е указано от свойството <code>error</code>), показваме съобщение за грешка на потребителя.</li>
  <li><b>Съобщение за успех:</b> Ако изпращането е успешно (определено от сървърното действие, връщащо { success: true, message: '...' }), показваме съобщение за успех.</li>
  <li><b>Сървърно действие:</b> Функцията <code>handleSubmit</code> е маркирана с <code>'use server'</code>, което я превръща в сървърно действие. Тя използва <code>fetch</code>, за да изпрати данните от формата до API крайна точка (<code>/api/contact</code>).</li>
  <li><b>Обработка на грешки в сървърното действие:</b> Сървърното действие се опитва да обработи API извикването и потенциалните грешки. Ако има грешка в отговора на API или изключение, то връща <code>{ success: false, message: '...' }</code>. Това съобщение след това е налично в свойството <code>error</code> на hook-а <code>useFormStatus</code>.</li>
  <li><b>Атрибут 'action':</b> Атрибутът <code>action</code> на тага <code><form></code> е настроен на сървърното действие <code>handleSubmit</code>. Това казва на React да използва тази функция, когато формата бъде изпратена.</li>
</ol>

<h3>Бекенд (Опростен пример с Node.js и Express)</h3>

<p>Ето един много основен пример за Node.js сървър, използващ Express за обработка на изпращането на формата:</p>

<pre>
<code>
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3001;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/api/contact', (req, res) => {
  const { name, email, message } = req.body;

  // Симулиране на валидация или обработка от страна на сървъра (напр. изпращане на имейл)
  if (!name || !email || !message) {
    return res.status(400).json({ message: 'Всички полета са задължителни.' });
  }

  if (!email.includes('@')) {
     return res.status(400).json({message: 'Невалиден имейл формат.'});
  }

  // Симулиране на успешна операция със забавяне
  setTimeout(() => {
    console.log('Form data received:', { name, email, message });
    res.status(200).json({ message: 'Формата е изпратена успешно!' });
  }, 1000);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});
</code>
</pre>

<h3>Ключови съображения за бекенда:</h3>

<ul>
  <li><b>Валидация:</b> Винаги извършвайте валидация от страна на сървъра, за да осигурите целостта на данните и сигурността.</li>
  <li><b>Обработка на грешки:</b> Внедрете стабилна обработка на грешки, за да улавяте неочаквани проблеми и да връщате смислени съобщения за грешки към клиента.</li>
  <li><b>Сигурност:</b> Почиствайте и валидирайте всички входни данни, за да предотвратите уязвимости в сигурността като cross-site scripting (XSS) и SQL инжекции.</li>
  <li><b>CORS:</b> Конфигурирайте Cross-Origin Resource Sharing (CORS) подходящо, за да разрешите заявки от домейна на вашето React приложение.</li>
  <li><b>JSON отговори:</b> Връщайте JSON отговори към клиента с подходящи HTTP кодове на състояние (напр. 200 за успех, 400 за грешки на клиента, 500 за грешки на сървъра).</li>
</ul>

<h2>Предимства на използването на <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Опростено управление на форми:</b> Централизираното управление на статуса на изпращане на форми намалява шаблонния код и подобрява четимостта на кода.</li>
  <li><b>Подобрено потребителско изживяване:</b> Обратната връзка в реално време за статуса на изпращане на формата (индикатори за зареждане, съобщения за грешки) подобрява ангажираността на потребителите и намалява неудовлетворението.</li>
  <li><b>Подобрена обработка на грешки:</b> По-лесният достъп до подробна информация за грешки позволява по-целенасочена обработка на грешки и подобрено отстраняване на проблеми.</li>
  <li><b>Декларативен подход:</b> Hook-ът предоставя декларативен начин за управление на статуса на формата, което прави кода по-предвидим и по-лесен за разбиране.</li>
  <li><b>Интеграция със сървърни действия:</b> Безпроблемната интеграция с React Server Actions опростява извличането и промяната на данни, което води до по-ефективни и производителни приложения.</li>
</ul>

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

<p>Освен основния пример, <code>experimental_useFormStatus</code> може да се използва и в по-сложни сценарии:</p>

<h3>1. Обработка на множество форми на една страница</h3>

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

<h3>2. Внедряване на персонализирана логика за валидация</h3>

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

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

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

<h3>4. Индикатори за напредък при качване на файлове</h3>

<p>Въпреки че <code>useFormStatus</code> не предоставя директно актуализации за напредъка при качване на файлове, можете да го комбинирате с други техники (напр. използване на обекта <code>XMLHttpRequest</code> и неговото събитие <code>upload.onprogress</code>), за да показвате индикатори за напредък на потребителя.</p>

<h2>Често срещани капани и как да ги избегнем</h2>

<ul>
  <li><b>Неизползване на сървърни действия:</b> <code>experimental_useFormStatus</code> е предназначен предимно да работи с React Server Actions. Ако не използвате сървърни действия, ще трябва ръчно да управлявате статуса на изпращане на формата и да актуализирате потребителския интерфейс съответно, което обезсмисля използването на hook-а.</li>
  <li><b>Неправилна обработка на грешки на сървъра:</b> Уверете се, че вашият сървърен код обработва грешките коректно и връща смислени съобщения за грешки към клиента. Свойството <code>error</code> на hook-а <code>useFormStatus</code> ще съдържа информация само за грешки, възникнали на сървъра.</li>
  <li><b>Игнориране на потенциални уязвимости в сигурността:</b> Винаги почиствайте и валидирайте потребителските данни както от страна на клиента, така и от страна на сървъра, за да предотвратите уязвимости в сигурността.</li>
  <li><b>Непредоставяне на обратна връзка на потребителя:</b> От решаващо значение е да предоставяте ясна и навременна обратна връзка на потребителя относно статуса на изпращане на формата (индикатори за зареждане, съобщения за грешки, съобщения за успех). Това подобрява потребителското изживяване и намалява неудовлетворението.</li>
</ul>

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

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

<h2>Съображения за интернационализация</h2>

<p>Когато изграждате форми за глобална аудитория, вземете предвид следните аспекти на интернационализацията:</p>

<ul>
  <li><b>Локализация на съобщенията за грешки:</b> Уверете се, че съобщенията за грешки са преведени на предпочитания от потребителя език. Можете да използвате библиотека за локализация като <code>i18next</code>, за да управлявате преводите.</li>
  <li><b>Форматиране на дати и числа:</b> Използвайте подходящи формати за дати и числа въз основа на локала на потребителя.</li>
  <li><b>Формати на адреси:</b> Адаптирайте полетата за адрес, за да съответстват на форматите на адреси в различните държави. Например, някои държави използват пощенски кодове преди името на града, докато други ги използват след него.</li>
  <li><b>Валидация на телефонни номера:</b> Внедрете валидация на телефонни номера, която поддържа различни кодове на държави и формати на телефонни номера.</li>
  <li><b>Оформление отдясно наляво (RTL):</b> Поддържайте RTL оформления за езици като арабски и иврит.</li>
</ul>

<p>Например, форма, която иска телефонен номер, трябва динамично да коригира правилата си за валидация в зависимост от избраната от потребителя държава. Телефонен номер в САЩ ще изисква 10-цифрен номер, докато телефонен номер във Великобритания може да изисква 11 цифри, включително водещата нула. По подобен начин съобщения за грешки като „Невалиден формат на телефонния номер“ трябва да бъдат преведени на езика на потребителя.</p>

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

<p><code>experimental_useFormStatus</code> е ценно допълнение към инструментариума на React, предлагащо оптимизиран и декларативен начин за управление на статуса на изпращане на форми. Използвайки този hook, разработчиците могат да изграждат по-стабилни, лесни за употреба и лесни за поддръжка форми. Тъй като тази функция в момента е експериментална, не забравяйте да следите най-новата документация на React и най-добрите практики на общността. Възползвайте се от този мощен инструмент, за да подобрите възможностите си за обработка на форми и да създадете изключителни потребителски изживявания за вашите приложения.</p></div><template id="P:4"></template></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><div hidden id="S:4"><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">React hooks</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">статус на изпращане</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>