Javascript使用.map函数实现点击按钮生成带日期div元素失败求助

核心错误点 #

• map() 是仅数组可调用的原生方法，你代码中定义的data是普通对象，直接调用.map()会抛出类型错误，这是代码无法运行的直接原因。
• 你在事件回调中生成的JSX元素没有存入组件状态，React的渲染逻辑依赖状态驱动，临时生成的JSX不会被自动渲染到页面上。

修复步骤 #

1. 定义状态存储待渲染数据 #

首先在组件内定义状态，用来存储需要展示的提交数据，示例用React的useState钩子：

import { useState } from 'react'

// 组件内部顶部定义状态，此处以列表场景为例（支持多次提交新增多条记录）
const [dataList, setDataList] = useState([])

如果只需要展示最新提交的单条数据，不需要历史记录，可以直接定义为单个对象状态：const [showData, setShowData] = useState(null)

2. 修改提交事件逻辑 #

const handleSubmit = (e) => {
  e.preventDefault();
  // 构造新提交的单条数据
  const newItem = { title: title, desc: desc, date: date };
  // 追加新数据到状态数组，触发组件重渲染
  setDataList(prev => [...prev, newItem])
  // 单条数据场景用这行替换上面的setDataList：setShowData(newItem)
}

3. 组件模板中添加渲染逻辑 #

在组件的return返回的JSX模板中，遍历状态渲染对应元素：

return (
  <div>
    {/* 你的原有表单、提交按钮等代码 */}

    {/* 列表场景渲染逻辑 */}
    {dataList.map((userinfo, index) => (
      // 注意key属性需要唯一，如有唯一业务字段（比如ID）请替换index
      <div key={index}>
        <h1>{userinfo.title}</h1>
        <p>{userinfo.desc}</p>
        <p>{userinfo.date}</p>
      </div>
    ))}

    {/* 单条数据场景渲染逻辑，替换上面的map部分即可
    {showData && (
      <div>
        <h1>{showData.title}</h1>
        <p>{showData.desc}</p>
        <p>{showData.date}</p>
      </div>
    )}
    */}
  </div>
)

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