是否有一些阻止循环内部地图方法的东西？

Question

我将 JSON 数据存储在名为 Recipes.json 的文件中（它是本地的），并且我正在使用状态挂钩并将该数据存储在名为“recipes”的状态变量中。作为参考，

这里是本地 .json 数据结构：

[
    {"id": "0001",
    "title": "Chicken Pot Pie",
    "url": "https://www.pillsbury.com/recipes/classic-chicken-pot-pie/1401d418-ac0b-4b50-ad09-c6f1243fb992",
    "time": {
        "prepTime": 25,
        "cookTime": 40
    },
    "ingredients": [
        "CHICKEN "
    ]
},

这是状态变量声明和赋值：

const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    const fetchRecipes = async () => {
      const response = await fetch('recipes.json');
      const recipesData = await response.json();
      setRecipes(recipesData);
    };
    fetchRecipes();
  }, []);

我有一个数组，我知道它包含动态成分列表，并在任何给定时间将其打印给用户以显示其中包含的内容。这是一个名为 allIngredients 的变量。

我正在尝试按 id 对不同的 json 对象运行 for 循环，根据 id map() 将成分放入数组 arrayToCheck，然后将按配方完成的 arrayToCheck 与用户进行比较创建了 allIngredients，但我的函数中出现错误：“解析器期望找到一个 '}' 来匹配此处的 '{' 标记。”我知道它在我的代码中没有其他地方，因为我没有更改任何其他内容，并且在添加此块之前它是有效的：

  const useRecipes = () => {
    let arrayToCheck = [];
    for (recipes.id; recipes.length; recipes.id++) {
      recipes.map((map.recipe) => {
        arraytoCheck = arrayToCheck.push(recipe.ingredients.toUpperCase())
        if (arrayToCheck.sort() === allIngredients.sort()) {
          return recipe.title;
        }
      })
      arrayToCheck = [];
    }
  }

我知道这可能看起来很复杂（我是 Stack Overflow 的新手，所以请提出任何澄清问题。提前致谢寻求帮助。

Answer 1

在Userecipes内部的第四行中，尝试更改

recipes.map((map.recipe) => {

为

recipes.map((recipe) => {

，但是由于您没有从地图返回，因此可以使用普通循环而不是地图。

更新

注意：

array.push（...）会自动将新元素添加到数组中，因此无需替换整个数组。

arrayToCheck.push(recipe.ingredients.toUpperCase()); //this is enough no need for arrayToCheck = 

在比较两个排序阵列检查阵列比较在这里/a>

当您在循环中不使用该方法时，从将配方传递给方法的意义是什么？在替换时，如何依靠它的值，您始终将最终获得最后一个值。

尚不清楚外圈在配方的ID上循环的目的是什么！

花一些时间了解JavaScript和循环