может повторно вызывать api из реакции js

Question

Я новичок в реакции. Может ли кто-нибудь помочь мне в том, как можно повторять вызов api каждые 15 минут и отображать данные в приложении? Пожалуйста, найдите код ниже. Я думаю, что использование setInterval / setTimeout может быть вариантом. Но какой из них лучше? Пожалуйста, помогите мне с моим кодом ниже. Заранее спасибо!

import React from 'react';
import axios from 'axios';

export default class UserList extends React.Component {
    state = {
        users: []
    };

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({users});
            })
    }

    render() {
        return (
            <ul>
                {this.state.users.map(user => <li>{user.name}</li>)}
            </ul>
        )
    }
}

Answer 1

Вы можете использовать любой из них, и он должен работать, но просто любопытно, почему вы хотите делать запрос каждые 15 минут. Требуется ли вам показать данные в реальном времени? если да, то я думаю, вы можете go с setInterval, как показано ниже, или просто введите кнопку refre sh и при необходимости позвоните

import React, { Component } from 'react';
import axios from 'axios';

const INTERVAL_DURATION = 15 * 1000 * 60;

export default class UserList extends Component {
  state = {
    users: [],
  };

  componentDidMount() {
    this._fetchUserInterval = setInterval(this._fetchUsers, INTERVAL_DURATION);
  }

  componentWillUmount() {
    clearInterval(this._fetchUserInterval);
  }

  _fetchUsers = () => {
    axios.get(`https://jsonplaceholder.typicode.com/users`).then(res => {
      this.setState({ users: res.data });
    });
  };

  render() {
    const { users } = this.state;

    return (
      <ul>
        {users.map((user, index) => (
          <li key={index}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

Answer 2

setTimeout() срабатывает только один раз, в то время как для повторяющейся задачи можно выбрать setInterval().

Вы можете go таким образом

componentDidMount() {
  setInterval(() => {
    axios.get(`https://jsonplaceholder.typicode.com/users.then(res => {
        const users = res.data;
        this.setState({users});
      });
  }, (15 * 1000 * 60));
}

Также, поскольку это класс компонент, вам нужно будет очистить все подписки в componentWillUnmount() или getDerivedStateFromProps().

Дополнительное примечание: всегда используйте ключи при итерациях в JSX.

render() {
        return (
            <ul>
                {this.state.users.map((user, index) 
                    => <li key={index}>{user.name}</li>)}
            </ul>
        )
    }

Answer 3

Попробуйте использовать функцию setInterval() -

componentDidMount() {
  setInterval(() => {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
     .then(res => {
        const users = res.data;
        this.setState({users});
      });
  }, (15 * 1000 * 60));
}

Answer 4

Попробуйте это. Используйте setInterval и сохраните intervalId, чтобы вы могли очистить его при отключении компонента.

import React from 'react';
import axios from 'axios';

export default class UserList extends React.Component {
    state = {
        users: [],
    };

    componentDidMount() {
        // Keep the interval id
        this.intervalId = setInterval(this.getData, 900000);
    }

    componentWillUnmount() {
        // use intervalId to clear the interval onUnmount
        clearInterval(this.intervalId);
    }

    getData() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({ users });
            })
            .catch(error => console.log(error))
    }

    render() {
        return (
            <ul>
                {this.state.users.map(user => <li>{user.name}</li>)}
            </ul>
        )
    }
}

Answer 5

Оба должны работать, но использование setInterval будет более простым вариантом.