Question

我有一个react组件，正在从另一个文件中导入函数，如下所示：

import documentIcons from '/documentIcons';

然后我正尝试使用如下功能：

let file = this.state.selectedFile;  //this returns fine
let fileExt = file.name.split('.').pop();   //this also works
let fileIcon = documentIcons(fileExt);   //this throws the error

但是我一直收到此错误：

未捕获的TypeError：Object（...）不是函数

documentIcons.js文件如下所示：

const icons= {
  "jlr": "/icn/typeA.png",
  "trr": "/icn/typeB.png",
  "bpx": "/icn/typeC.png",
};

export const documentIcons = (f) => {
  this.icons.find(f)
}

我正在传递文件扩展名（jlr，trr或bpx），我希望返回该图标的路径。

在react / es6中有没有办法做到这一点？

谢谢！

Answer 1

documentIcons是named export，应为imported as one：

import { documentIcons } from '/documentIcons'

另一种选择是将命名的导出更改为default export：

const documentIcons = (f) => {
    this.icons.find(f) // this error is handled below
}

export default documentIcons

您还应该从方法中删除this，因为icons是作用域中的常量，而不是同一对象的属性。一个对象没有find方法，您应该使用方括号表示法获取值，然后将其返回：

const documentIcons = (f) => icons[f]

Answer 2

这里有几个缺少的部分。

首先使用默认值导出函数或将其导入为命名函数：

import { documentIcons } from "/documentIcons";

第二，您不能在对象上使用.map。如果要查找带有对象密钥的URL，请按以下方式使用它：

icons[f]

第三，您没有从函数中返回任何内容。像这样使用它：

export const documentIcons = (f) => icons.[f];

这是以下项的简写：

export const documentIcons = (f) => {
    return icons.[f]
}

尝试从函数中获取值时发生错误

2 个答案: