State'i Yönetme

Orta Düzey

Uygulamanız büyüdükçe, state’inizin nasıl düzenlendiği ve bileşenleriniz arasında veri akışının nasıl olduğu konusunda daha bilinçli olmanız size yardımcı olur. Gereksiz ve yenilenen state, yaygın bir hata kaynağıdır. Bu bölümde, state’inizi nasıl iyi yapılandıracağınızı, state güncelleme mantığınızı nasıl sürdürülebilir tutacağınızı ve uzak bileşenler arasında state’i nasıl paylaşacığınızı öğreneceksiniz.

Bu bölümde

State ile girdiye reaksiyon verme

React ile kullanıcı arayüzünü direkt olarak koddan modifiye etmeyeceksiniz. Örneğin, “butonu devre dışı bırak”, “butonu etkinleştir”, “başarılı mesajını göster” gibi komutlar yazmayacaksınız. Onun yerine, bileşeninizin farklı görsel state’leri (“başlangıç state’i”, “yazma state’i”, “başarı state’i”) için görmek istediğiniz kullanıcı arayüzünü tanımlayacak ve ardından kullanıcı girdisine yanıt olarak state değişikliklerini tetikleyeceksiniz. Bu, tasarımcıları kullanıcı arayüzünü nasıl düşündüğüyle benzerdir.

Aşağıda React ile yapılmış bir kısa sınav formu vardır. Gönder butonunun etkinleştirilip etkinleştirilmeyeceğini ve bunun yerine başarı mesajının gösterilip gösterilmeyeceğini belirlemek için status durum değişkeninin nasıl kullanıldağına dikkat edin.

Fork

import { useState } from 'react';

export default function Form() {
  const [answer, setAnswer] = useState('');
  const [error, setError] = useState(null);
  const [status, setStatus] = useState('typing');

  if (status === 'success') {
    return <h1>Doğru!</h1>
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('submitting');
    try {
      await submitForm(answer);
      setStatus('success');
    } catch (err) {
      setStatus('typing');
      setError(err);
    }
  }

  function handleTextareaChange(e) {
    setAnswer(e.target.value);
  }

  return (
    <>
      <h2>Şehir sorusu</h2>
      <p>
        İki kıta üzerinde konumlanmış şehir hangisidir?
      </p>
      <form onSubmit={handleSubmit}>
        <textarea
          value={answer}
          onChange={handleTextareaChange}
          disabled={status === 'submitting'}
        />
        <br />
        <button disabled={
          answer.length === 0 ||
          status === 'submitting'
        }>
          Gönder
        </button>
        {error !== null &&
          <p className="Error">
            {error.message}
          </p>
        }
      </form>
    </>
  );
}

function submitForm(answer) {
  // Ağa istek atıyormuş gibi yapalım.
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let shouldError = answer.toLowerCase() !== 'istanbul'
      if (shouldError) {
        reject(new Error('İyi tahmin ama yanlış cevap. Tekrar dene!'));
      } else {
        resolve();
      }
    }, 1500);
  });
}

Bu konuyu öğrenmeye hazır mısınız?

Girdiye State ile Reaksiyon Verme sayfasını okuyarak etkileşimlere state odaklı zihniyetle nasıl yaklaşılacağını öğrenebilirsiniz.

Devamını Oku

State yapısını seçme

State’i iyi yapılandırmak, değiştirmesi ve hata ayıklaması keyfli bir bileşen ile sürekli hata kaynağı olan bir bileşen arasında fark yaratabilir. En önemli ilke, state’in gereksiz veya yinelenen bilgiler içermemesidir. Gereksiz state varsa, güncellemeyi unutmak ve hatalara neden olmak kolaydır!

Örneğin, bu form gereksiz bir fullName state değişkenine sahip:

Fork

import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [fullName, setFullName] = useState('');

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
    setFullName(e.target.value + ' ' + lastName);
  }

  function handleLastNameChange(e) {
    setLastName(