从React中的一个单独的.js文件导出由'fetch'返回的数据

Question

这是我的代码

const data = () => fetch("https://api.myjson.com/bins/mp441")
      .then(response => response.json())
      .then(obj => data = obj);

const RECORD_NOS=Object.keys(data).length-1;

export {data, RECORD_NOS}

我试图将json数据托管在上述url上，将数据保存在变量中并导出以供我的React应用程序中的不同地方使用，但是不幸的是它给出了以下错误。

./src/resources/index.js
Syntax error: D:/Users/kumahay/Documents/lending-referrals-app/src/resources/index.js: "data" is read-only

  1 | const data = () => fetch("https://api.myjson.com/bins/mp441")
  2 |       .then(response => response.json())
> 3 |       .then(obj => data = obj);
    |                    ^
  4 | 
  5 | const RECORD_NOS=Object.keys(data).length-1;
  6 |

我尝试了控制台日志记录而不是分配数据，但是它不起作用。显然数据没有被获取。如何更好地构建此代码以使其按预期工作？我是javaScript的初学者，因此将不胜感激。

Answer 1

我认为您应该阅读有关异步功能，Promises和fetch的更多信息。最好的方法是导出getData功能，.then(obj => data = obj)像这样在其他任何模块中删除并使用它

getData.js

export const getData = () => fetch("https://api.myjson.com/bins/mp441")
  .then(response => response.json())

anyOtherFile.js

import {getData} from './path/to/getData.js';

export const someFunc = () => {
   getData().then(data => {
       /* do what you want to do in promise resolve callback function */
   })
}

或使用异步/等待符号

getData.js

export const getData = async () => fetch("https://api.myjson.com/bins/mp441")
  .then(response => response.json())

anyOtherFile.js

import {getData} from './path/to/getData.js';

export const someFunc = async () => {
    const data = await getData();
}