map() 没有渲染 html 元素

Question

我在这个问题上花了 4 个小时，但无法弄清楚问题所在。通过 props 我传递了一个数组（props.content）并想用<h4> tag（不具体）呈现每个元素，但我不能。当我尝试 console.log 数组的每个元素时，它会起作用。

import classes from "./Memes.module.css";
const Memes = (props) => {
        
       return (
         <div className={classes.memes__body}>
         {Array.prototype.forEach.call(props.content,items=>{
             console.log(items)
         })}
          </div> 
       );
}


export default Memes;

输出 -

但是当我运行相同的方法来渲染某些 html tags 中的所有项目时它不起作用。

import classes from "./Memes.module.css";

const Memes = (props) => {
        
       return (
         <div className={classes.memes__body}>
         {Array.prototype.forEach.call(props.content,items=>{
             <h1>{items}</h1>
         })}
          </div> 
       );
}


export default Memes;

输出 没用。

注意 - 这里props.content 是一个字符串数组。

Fetch_memes.js（父级）

import { useState } from "react";
import { useEffect } from "react";
import Memes from "./Memes";

const Fetch_memes = () => {

    const [image, setImage] = useState();
    const [text, setText] = useState("");

    useEffect(() => {
        const memes = async () => {
        const response = await  fetch('https://www.reddit.com/r/memes.json');
    
        if (!response.ok) {
          throw new Error("Something went wrong");
        }
    
        const responseData = await response.json();
        const img = responseData.data.children[0].data.thumbnail;
        const memesCollection = [];
        memesCollection.push("If you can Code then this doesn't mean that your are developer");

        for(let i=0 ; i<20 ; i++){
            memesCollection.push(responseData.data.children[i].data.title);
        }
        
        console.log(memesCollection[1]);
        setImage(img);
        setText(memesCollection);
        }
        memes();
      }, []);

  return (
      <Memes src={image} content={text}/>
  );
}

export default Fetch_memes;

Answer 1

您需要在代码中使用 return：

import classes from "./Memes.module.css";

const Memes = (props) => {
        
    return (
      < >
      {props.content.map((items)=>{
          return <h1>{items}</h1>
      })}
       </> 
    );
}


export default Memes;

Answer 2

你可以使用

{props.content.map(items=>{
             return <h4>{items}</h4>
         })}

或者将{}替换为()，react默认返回值：

{props.content.map(items=>(<h4>{items}</h4>))}

---

更新：试试这个：

import classes from "./Memes.module.css";
import React from "react"
const Memes = ({content})=>{
  return (
    <div>
      {content.map(item=>(<h1>{item}</h1>))}
    </div>
  );
}

export default Memes;

让我知道结果。