一旦 React JS 自动更新来自 API 调用 API 的数据答案

【问题标题】：Automaticaly update data from API calling API once React JS一旦 React JS 自动更新来自 API 调用 API 的数据
【发布时间】：2020-07-18 19:32:58
【问题描述】：

我正在尝试寻找一种解决方案，通过 React 中的一次调用自动更新 API 数据。

我想要的是从比赛现场获得比分和时间，而不需要调用 api 来更新或刷新页面。

我添加了setInterval函数，它可以正常工作但每次都会调用API，我不想每秒都调用API。

我的代码是

import React, { useState, useEffect } from 'react';
import './App.css';

function EvenimenteMaine() {

    useEffect(() => {
     // setInterval(() => {
        fetchItems();
    //  }, 1000)
    
    },[]);

    const OPTIONS = {
        method : 'GET',
        headers : {
            'X-RapidAPI-Host' : 'api-football-v1.p.rapidapi.com',
            'X-RapidAPI-Key' : '###'
        }
    };
    
    const [fixtures, setFixtures] = useState([]);

    const fetchItems = async () => {
        const data = await fetch(
            'https://api-football-v1.p.rapidapi.com/v2/fixtures/id/232860' , OPTIONS
            );
        const fixtures = await data.json();
        const teamData = fixtures.api && fixtures.api.fixtures.length > 0 ? fixtures.api.fixtures : [];

        console.log(fixtures);
        setFixtures(teamData);
    }


  return (
    <div>
      {fixtures.slice(0,10).map(fixture => (
        <div>
        <div>{fixture.elapsed}</div>
        <div><span>{fixture.goalsHomeTeam}</span> - <span>{fixture.goalsAwayTeam}</span></div>

        </div>
      ))}
    </div>
  );
}

export default EvenimenteMaine;

有什么想法吗？谢谢！

【问题讨论】：

What i want is to get the score and the time from the match live without calling api for this to update or refresh the page 抱歉我不明白 - 所以你想触发一次请求然后存储数据更新页面？
我想触发一次请求并存储分数并每分钟更新一次，这样我就可以接收分数并每 1 分钟自动更新一次。但我想请求一次 api
但是我的分数在服务器端发生了变化？因此，要获得当前分数，您需要向服务器发出请求
所以任何为您提供比赛信息的网站每秒都在向 api 发出请求？
Okey 所以有两种方法可以实现当前分数：一种是间隔请求或编写websocket连接。我认为大多数实时比分网站都是建立在 websookets 上的

标签： reactjs api

【解决方案1】：

你不能这样做。如果要从服务器端获取更新的数据，则需要进行 API 调用。如果您不进行 API 调用，客户端或您的应用程序如何知道分数/数据已更新？所以我相信，如果你想获取更新的数据，你必须进行 API 调用。

【讨论】：