React中如何在h1元素渲染数据值？代码问题求助

import React, { useState } from 'react'
import Card from './Card'
import memesData from './memesData';
import './MainContent.css';

function MainContent() {
   // 用更语义化的变量名，初始值设为提示文本
   const [memeName, setMemeName] = useState('点击按钮获取随机Meme名称')

   function getMemeImage() {
      const memesArray = memesData.data.memes
      const randomNumber = Math.floor(Math.random() * memesArray.length)
      const randomMemeName = memesArray[randomNumber].name
      // 直接替换为新的随机名称，而非追加
      setMemeName(randomMemeName)
   }

   return (
      <div>
         <button onClick={getMemeImage}> Click me </button>
         {/* 渲染状态变量而非更新函数 */}
         <h1>{memeName}</h1>
      </div>
   )
}

export default MainContent

1. 渲染错误：你之前在<h1>里写了{setData}，setData是React提供的状态更新函数，不能直接渲染到页面上，应该渲染对应的状态变量（比如修正后的memeName）。
2. 状态更新逻辑问题：setData(data + n)会把新名称追加到旧内容后面，如果你需要每次点击显示全新的随机名称，应该直接用新值覆盖旧值。如果需要保留历史名称，可以改成setMemeName(prev => prev + ', ' + randomMemeName)。

内容的提问来源于stack exchange，提问作者user19565806