使用 forEach 而不是 map ，尝试访问 Array 中的对象答案

【问题标题】：Using forEach instead of map , trying to access objects in an Array使用 forEach 而不是 map ，尝试访问 Array 中的对象
【发布时间】：2021-08-11 17:49:08
【问题描述】：

我正在尝试构建一个 React 食谱应用程序。我正在为食谱搜索提出 API 请求。我的问题是关于在这一行中使用地图

 {recipes.map((recipe) => (
        <Recipe />
      ))}

我们正在尝试访问数组中的对象。正确的？是的，这行得通。但是，我不明白为什么

 {recipes.forEach ((recipe) => (
        <Recipe />
      ))}

不起作用。你能解释一下吗？整个代码如下。

App.js

import React, { useEffect, useState } from "react";
import Recipe from "./Recipe";
import "./App.css";

function App() {
  const APP_ID = "xxxxxxxxxxx";
  const APP_KEY = "yyyyyyyyyyyyyyyyyyy";

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

  useEffect(() => {
    getRecipes();
  }, []);

  //yeni bir fonksiyon yazıyorum. take care of fetching all data
  const getRecipes = async () => {
    const response = await fetch(
      `https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`
    );
    const data = await response.json();
    setRecipes(data.hits);
  };

  return (
    <div className="App">
      <form className="search-form">
        <input className="search-bar" type="text" />
        <button className="search-button" type="submit">
          Search
        </button>
      </form>
      {recipes.map((recipe) => (
        <Recipe />
      ))}
    </div>
  );
}

export default App;

Recipe.js

import React from "react";

const Recipe = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Calories</p>
      <img src="" alt="" />
    </div>
  );
};

export default Recipe;

【问题讨论】：

标签： arrays reactjs ecmascript-6

【解决方案1】：

因为.map() 返回<Recipe /> 实体的ARRAY，而.forEach() 不返回任何内容。 React 不会通过副作用渲染 - 它需要返回的 JSX。

【讨论】：

哦..我明白了。谢谢！所以地图渲染是这样的？ [Recipe，Recipe，Recipe，Recipe] 我无法对包含元素组件的数组进行成像。我怎样才能看到那个数组？
您可以将整个地图分配给外部变量，然后控制台记录它。 const recipesList = recipes.map((recipe) => ( )); console.log(recipesList);然后在 return 里面，你可以简单地使用这个变量来渲染。 {recipesList}

【解决方案2】：

forEach 版本不会像map 版本那样返回渲染元素的数组。 forEach 中渲染的元素不存在于 forEach 函数范围之外，而 map 版本返回数组中的元素。

【讨论】：