Ajax Kullanımı

React ile istediğiniz herhangi bir AJAX kütüphanesini kullanabilirsiniz.

Popüler olanlar Axios, jQuery AJAX ve tarayıcıda yerleşik olarak bulunan window.fetch.

Lifecycleda AJAX isteğini nerede yapmalıyım?

AJAX isteklerini componentDidMount fonksiyonunda kullanmalısınız. AJAX isteğinden gelen veriyi setState yardımıyla state’e atarak componentin içerisinde kullanabilirsiniz.

Aşağıdaki component, statei doldurmak için componentDidMountta bir AJAX çağrısının nasıl yapılacağını gösterir:

{
  items: [
    { id: 1, name: "Apples", price: "$2" },
    { id: 2, name: "Peaches", price: "$5" }
  ];
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    //AJAX isteğini burada başlatıyoruz.
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        result => {
          //AJAX'tan gelen veri ile state'imizi güncelliyoruz.
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Yükleniyor...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}

Sıradaki Eğitim: React Hook