javascript - react 原生TypeError(..)不是函数

我想显示图像和从对象中随机选择的文本，这些对象是从数组中随机选择的。

基本上，这就是我计划用来获取名称和图像的链：
成分
我敢肯定，关于面向对象的编程我没有一些基本的知识，但是我无法使其正常工作。

IngredientArray：

const ingredient1 = new Ingredient("green salad", require('./app/components/img/base/green_salad.jpg'));
const ingredient2 = new Ingredient("mixed salad", require('./app/components/img/base/mixed_salad.jpg'));
var ingredientArray = ["ingredient1", "ingredient2"]

getRandomIngredient：

function getRandomIngredient (arr){
  if (arr && arr.length) {
    return arr[Math.floor(Math.random() * arr.length)];
  }
}

类成分：

function Ingredient (ingredientName, ingredientImage){
  this.ingredientName = ingredientName;
  this.ingredientImage = ingredientImage;

  Ingredient.prototype.getIngredientName = function(){
    return this.ingredientName;
  }

  Ingredient.prototype.getIngredientImage = function(){
    return this.ingredientImage;
  }
}

我想做的是：

<Image source = {getRandomIngredient(ingredientArray).getIngredientImage()}

但是我收到以下错误消息：

TypeError: getRandomIngredient(...).getIngredientImage is not a function

如果直接调用函数getIngredientImage（），我将得到一个工作结果：

<Image source = {base1.getIngredientImage()} />

最佳答案

没有getIngredientImage方法，因为getRandomIngredient(ingredientArray)不返回Ingredient的实例。因为ingredientArray是字符串数组，而不是Ingredient实例。

它应该是：

var ingredientArray = [ingredient1, ingredient2]

关于javascript - react 原生TypeError(..)不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54891809/