javascript - 更改 API 调用后反应脚本停止工作

Question

我有一个脚本，它从 React 调用 API，然后触发电子邮件通知功能。

我正在更改它的一部分以调用整个参数数组，而不是一个接一个地调用一个参数。

这是更改前的部分（工作之一）。控制台日志显示正确响应，我也收到电子邮件通知。

const getApiData = () => {
const apiCall = (symbol) => {
  return `https://min-api.cryptocompare.com/data/pricemulti?fsyms=${symbol}&tsyms=USD&api_key=API-KEY-HERE`
}

const MAX_CHARACKTERS = 300

let bucketArray = ['']

for (let i=0; i < assets.length - 1; i += 1) {
  const symbol = `${bucketArray[bucketArray.length - 1]},${assets[i]}`
  if (i === 0) {
    bucketArray[0] = assets[i]
    continue
  }
  if (symbol.length < MAX_CHARACKTERS) {
    bucketArray[bucketArray.length - 1] = symbol
  } else {
    bucketArray[bucketArray.length] = assets[i]
  }
}

const getData = () => {
  Promise.all(
    bucketArray.map(req => {
      return axios(apiCall(req))
        .then(({ data }) => data)
    })
  ).then((data) => setDataApi(data))
}
getData()
};

这是一个有问题的。

const getApiData = () => {
    const getString = symbol =>
      `https://min-api.cryptocompare.com/data/pricemulti?fsyms=${symbol}&tsyms=USD&api_key=API-KEY-HERE`;

    function getAxious(id) {
      const url = getString(id);
      return axios.get(url);
    }

    const BUCKET_SIZE = 150;
    const bucketArray = assets.reduce(
      (arr, rec) => {
        if (arr[arr.length - 1].length < BUCKET_SIZE) {
          arr[arr.length - 1] = [...arr[arr.length - 1], rec];
          return arr;
        }
        return [...arr, [rec]];
      },
      [[]]
    );

    bucketArray
      .reduce((acc, rec) => {
        return acc.then(results => {
          return Promise.all(
            rec.map(item =>
              getAxious(item).then(({ data }) => {
                return {
                  Symbol: item,
                  Open: data
                };        
              })
            )
          ).then(x => {
            return [...x, ...results];
          });
        });
      }, 
      Promise.resolve([]))
      .then(res => {
        setDataApi(res);
      });
  };

在控制台中，我收到空数组 -[]没有显示错误，但电子邮件通知也停止工作。

我正在更改代码，因为我需要在一次调用中从 API 调用整个数组。在我一个symbol接一个地打电话之前。

我做错了什么控制台没有显示正确的响应？

编辑1

这是 bucketArray 值

const assets = ['ADA','KAVA','DOGE'];

标签： javascriptreactjs

Answer 1

我无法完全理解，但我认为您想将所有结果一起收集并使用 setDataApi 将其设置为数据。

检查下面的代码，让我知道它是否有帮助：

 async function getApiData() {
  const getString = (arr) =>
    `https://min-api.cryptocompare.com/data/pricemulti?fsyms=${arr.join(
      ","
    )}&tsyms=USD&api_key=API_KEY`;

  function getAxious(arr) {
    const url = getString(arr);
    return axios.get(url);
  }

  const BUCKET_SIZE = 150;
  const bucketArray = assets.reduce(
    (arr, rec) => {
      if (arr[arr.length - 1].length < BUCKET_SIZE) {
        arr[arr.length - 1] = [...arr[arr.length - 1], rec];
        return arr;
      }
      return [...arr, [rec]];
    },
    [[]]
  );

  const res = await getAxious(bucketArray);

  console.log("res", res);
  return res;
  // after this you can set  setDataApi(res);
}

// keep this useEffect sepearate

const [timer, setTimer] = useState(null);

useEffect(() => {
  async function getApiDatahandler() {
    const res = await getApiData();
    console.log(res);
    const timerId = setTimeout(() => {
      getApiDatahandler();
    }, 1000 * 60);
    setTimer(timerId);
    setDataApi(res)
    // set the data setDataApi(res);
  }
  getApiDatahandler();

  return () => {
    window.clearTimeout(timer);
  };
}, []);

// useEffect(() => {
//     const timerId = setTimeout(() => {
//       getApiData();

//     }, 1000 * 60);

// }, [])