arrays - map() 没有渲染 html 元素

Question

我在这个问题上花了 4 个小时，但无法弄清楚问题出在哪里。通过道具，我传递了一个数组（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;

输出-

但是当我运行相同的方法来渲染 some 中的所有项目时它不起作用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;

标签： arraysreactjsmappingreact-props

Answer 1

您需要在代码中使用 return：

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

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


export default Memes;