Javascript 导入字符串常量而不是在本地声明它们时未经处理的拒绝

我有一个React-Redux thunk操作，从API服务器检索类别，然后将它们添加到Redux存储：

（categoryActions.js）

将其与以下API调用一起使用时效果良好：

（categoryApi.js）

但是，当我尝试在不同的文件中定义API常量时，如下所示：

（apiConstants.js）

然后在categoryApi.js中使用它们：

import {
  HEADERS,
  SERVER_URL
} from './apiConstants'

export const getCategories = () => (
  fetch(`${SERVER_URL}/categories`, { HEADERS })
  .then(res => res.json())
  .then(data => data.categories)
)

我从上面categoryActions.js中thunk操作的第3行得到以下错误：

未处理的拒绝（TypeError）：无法读取属性 未定义的“Symbol（Symbol.iterator）”

---

问题是什么？

问题是您的变量是大写的，因此您需要正确设置属性，因为

fetch

希望它是小写的：

export const getCategories = () => (
  fetch(`${SERVER_URL}/categories`, { headers: HEADERS })
  .then(res => res.json())
  .then(data => data.categories)
)

--

相当于：

{ headers: headers }

因此，在第二个示例中，您将其大写：

{ HEADERS: HEADERS }

这被称为

export const getCategories = () => (
  fetch(`${SERVER_URL}/categories`, { headers: HEADERS })
  .then(res => res.json())
  .then(data => data.categories)
)

{ headers }

{ headers: headers }

{ HEADERS: HEADERS }