使用数组中的数据时，forEach 在 ReactJs 中不起作用

Question

我在学习 reactJS.Here 时遇到问题，我有一个 HomePage 组件，其中 forEach 在我尝试从定义的数组中获取数据时无法在 ReactJs 中工作。下面是代码：

import React, { useEffect } from "react";
import ChessRankings from "../components/ChessRankings";
import "../App.css";


import gifPath from "../assets/pieceChess.gif";

const paraContent = [

"ChessMania is a website that gives the latest update for chess. Chess is one of the 
most tactical games played across the globe. Here our main focus is to present the 
various chess articles. However, this website also covers the basics of learning 
objectives of chess as well as current chess rankings at the international level.",

"Subsequently, we also cover the common FAQs related to chess, the notation, and the 
type of game played in chess. You also get a glimpse of various prestigious 
tournaments of chess played across the globe within a chess calendar and about the 
esteemed players taking part in, it.",

"The last section takes you through the profile of any Lichess Player that loves 
chess. The profile section displays the basic introduction, including name, 
nationality, followers, and total games played. Later it shows the player's rating in 
each variant and the percentage of wins and losses. It also shows the chess variant 
played by that user most and which are least. Finally, it shows the statistics of the 
player in the puzzle section.",

];

const HomePage = () => {
  useEffect(() => {
     document.title = "ChessMania - Home";
  }, []);

return (
<>
  <h1>Hello , Welcome to Chess Mania</h1>
  <br />
  <div className="text-center">
    <img src={gifPath} alt="gif" />
  </div>
  <hr />

  {
    paraContent.forEach((element) => {
    //console.log(element);
    return (<p className="about-paragraph">{element}</p>)
     })
  }

  
    </>
  );
};

 export default HomePage;

我无法找出错误？任何人，请告诉我这里有什么问题？

Answer 1

在渲染元素中使用 map 函数：

https://codesandbox.io/s/react-code-slr6e

paraContent.map((element, index) => {
    //console.log(element);
    return (<p className="about-paragraph" key={index}>{element}</p>)
})

使用数组中的数据时，forEach 在 ReactJs 中不起作用

forEach not working in ReactJs while using data from array

javascript

arrays

foreach

for-loop

reactjs