AJAX and APIs در React

چگونه می‌توانم یک فراخوانی AJAX را انجام دهم؟

شما می‌توانید از هر کتابخانۀ ایجکس که می‌خواهید در ری اکت استفاده کنید. برخی از پرطرفدارهای آن عبارتند از Axios و jQuery AJAX و window.fetch خود مرورگر.

در چه قسمتی از چرخۀ زندگی کامپوننت باید فراخوانی ایجکس را انجام دهم؟

شما باید دیتا را با فراخوانی‌های ایجکس در داخل متد چرخۀ زندگی componentDidMount تجمیع کنید. به این صورت می‌توانید با استفاده از setState وقتی دیتا بازیابی شد، کامپوننت خود را آپدیت کنید.

مثال: استفاده از ایجکس منتج به تنظیم حالت محلی می‌گردد

کامپوننت زیر نشان می‌دهد که نحوۀ انجام یک فراخوانی ایجکس داخل componentDidMount جهت تجمیع حالت محلی کامپوننت چگونه است.

API مثال، به صورت زیر یک آبجکت JSON را برمی‌گرداند:

{
  "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() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (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>Loading...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}

مجموعه: FAQبرچسب ها
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit