在 for 循环中是否有东西阻塞了 map 方法？

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 的变量。

我正在尝试运行一个 for 循环通过不同的 json 对象，每个 id map() ingedients 进入一个数组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 =

不清楚你在比较两个排序数组时要达到什么目的检查数组比较here

当您不在循环中使用它时，将 recipeTitle 传递给该方法有什么意义？当它一直被替换并且您将始终获得最后一个值时，您如何依赖它的值.

并且不清楚外层循环遍历食谱 id 的目的是什么！！

花点时间理解javascript和循环

在 for 循环中是否有东西阻塞了 map 方法？

Is there something blocking a map method inside of a for loop?

javascript

state

reactjs

react-hooks

use-state