从 React 中的单独 .js 文件导出由“fetch”返回的数据

IT技术 javascript reactjs redux
2021-04-27 22:22:20

这是我的代码 

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}

我正在尝试获取托管在上述 url 上的 json 数据，将数据保存在一个变量中并将其导出以在我的 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 的初学者，所以任何帮助将不胜感激。

2个回答

我认为你应该阅读更多关于异步函数、Promise和获取的信息。最好的方法是导出getData功能，删除.then(obj => data = obj)并在任何其他module中使用它

获取数据.js

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

任何其他文件.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 */
   })
}

或使用 async/await 符号

获取数据.js

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

任何其他文件.js

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

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

请将数据名称更改为响应数据，而不是常量使用变量。常量不能被覆盖，但变量可以。

例子：

var 数据 = "东西";

const name ="Japarsathik";

var salary = "$5000";
其它你可能感兴趣的问题
上一篇如何使用gapi将图像上传到谷歌驱动器并做出react 下一篇使用 PropType 对嵌套对象属性进行类型检查