为什么使用 Array.map() 从数组中渲染 HTML 元素有效，但使用 Object.keys().forEach() 从 Object 渲染 HTML 元素却不行？答案

【问题标题】：Why rendering HTML elements with data from array using Array.map() works but from Object using Object.keys().forEach() doesn't?为什么使用 Array.map() 从数组中渲染 HTML 元素有效，但使用 Object.keys().forEach() 从 Object 渲染 HTML 元素却不行？
【发布时间】：2021-09-29 21:01:46
【问题描述】：

我很想知道为什么这段代码 - 使用 Array.map() 使用数组中的数据渲染 HTML 元素 - 工作正常并且元素出现在屏幕上：

<div className="container">
    {data.map((d) => (
        <div className="item">
            <img 
            src={d.img} 
            alt=""/>
            <h3>{d.title}</h3>
        </div>
    ))}
</div>

但是这段代码 - 使用 forEach() 使用来自对象的数据渲染 HTML 元素 - 不起作用，屏幕上什么也没有出现，尽管没有引发错误并且<div className="betCard"></div> 中的 console.log() 工作正常：

<div className="container">
    {Object.keys(data).forEach((bet) => (
        <div className="betcard">
            <p>{data[bet]["name"]}</p>
            <p>{data[bet]["oddsDecimal"]}</p>
            <p>{data[bet]["genericName"]}</p>
        </div>
    ))}
</div>

【问题讨论】：

.forEach() 方法会忽略其回调函数的任何返回值。
问：我有一个可以工作的功能，另一个不工作。答：使用有效的。
""我怎样才能让第二个函数正常工作" " 嗯，使用 map.... 而不是 forEach。 ;)

标签： javascript html arrays reactjs object

【解决方案1】：

map 返回一个结果列表，而forEach 总是返回undefined（所以没有任何东西传递给 React 进行渲染）。后面的代码可以成功写成：

<div className="container">
    {Object.keys(data).map((bet) => (
        <div className="betcard">
            <p>{data[bet]["name"]}</p>
            <p>{data[bet]["oddsDecimal"]}</p>
            <p>{data[bet]["genericName"]}</p>
        </div>
    ))}
</div>

【讨论】：

【解决方案2】：

Foreach 不返回结果，map 会。

{Object.keys(data).map((bet) => (

会解决问题。

【讨论】：