Javascript 我可以使用 for 语句创建包含 api 数据的数组吗

我正在学习和做一个使用Reaction钩子的项目.这是一款菜谱应用程序，使用的API来自MealDB.

在本例中有多个成分，每个成分来自API中不同的键，比如从strIngredient1到strIngredient20.我想将它们全部放在一个数组中，这样我就可以使用贴图将它们全部呈现在一个列表中.这里有一个例子说明了它是如何实现的:

    const { strIngredient1, strIngredient2, strIngredient3, strIngredient4,
      strIngredient5, strIngredient6, strIngredient7, strIngredient8, strIngredient9,
      strIngredient10, strIngredient11, strIngredient12, strIngredient13, strIngredient14,
      strIngredient15, strIngredient16, strIngredient17, strIngredient18, strIngredient19,
      strIngredient20 } = recipeIdState;

    const ingredientArray = [strIngredient1, strIngredient2, strIngredient3,
      strIngredient4, strIngredient5, strIngredient6,
      strIngredient7, strIngredient8, strIngredient9,
      strIngredient10, strIngredient11, strIngredient12, strIngredient13, strIngredient14,
      strIngredient15, strIngredient16, strIngredient17, strIngredient18, strIngredient19,
      strIngredient20];
    setIngredients(ingredientArray);

我觉得没有必要使用这么多空间来创建一个简单的数组，所以我的问题是，我是否可以使用for来命名这些值并将它们放入ReceipeIdState变量中？

我的 idea 是这样的:

for(let i = 1; i <= 20, i++) {
  const { `strIngredient${i}`} = recipeIdState;
  ingredientArray.push(`strIngredient${i}`);
}
  setIngredients(ingredientArray)

我try 使用简单的Java脚本解构来创建一个具有多个值的简单数组，但我觉得这不是编写干净代码的最佳方式.