Reactjs 我想使用.map方法react js获取ulli中的表单数据

我希望表单数据使用.map方法以Ul li打印

表单数据处于用户状态，打印控制台也处于用户状态。使用map方法显示错误

我希望表单数据使用.map方法以Ul li打印

表单数据处于用户状态，打印控制台也处于用户状态。使用map方法显示错误

console.log（用户）

import React，{useState}来自“React”；
从“axios”导入axios；
从“react router dom”导入{NavLink}；
从“../../images/contact main banner.jpeg”导入Bannerimg；
从“react Helmet”导入{Helmet}；
常量联系人=（）=>{
const[user，setUsers]=useState({
你的名字：“，
流动电话：“，
电邮：“，
信息：“
});
const{yourname，mobile，email，message}=user；
常量输入更改=e=>{
//setUsers（{…user，[e.target.name]：e.target.value}）；
设置用户({
…用户，
[e.target.name]：e.target.value
});
//常量{name，value}=e.target；
//设置用户（prevval=>{
//返回{
//…普雷瓦尔，
//[名称]：值
//   };
// });
};
const onSubmit=async e=>{
e、 预防默认值（）；
等待axios
.邮政(
"https://sheet.best/api/sheets/3b89ec5e-3ba3-4c8f-9180-cc9352f06a19",
用户
)
。然后（响应=>{
//控制台日志（响应）；
警报（“表格已成功发送”）；
})
.catch（错误=>{
警报（“未发送表格”）；
});
//警报（`${yourname}
${mobile}
${email}
${message}`）；
设置用户({
你的名字：“，
流动电话：“，
电邮：“，
信息：“
});
console.log（用户）；
};
返回(
接触

家


联系我们

联系我们
{
提交（e）；
}}
>
你的名字
手机号码
电子邮件Id
消息
提交
{user.map（（formVal，index）=>{
返回(

{formVal.yourname}
{formVal.mobile}
{formVal.email}
{formVal.message}

);
})}
);
};
导出默认联系人
您需要首先将对象的键转换为数组，然后映射并打印

像这样：

<div className="col-md-4">
     <ul>
      {Object.keys(user).map(function(name){
        return <li>{name} :{ user[name]}</li>
      })}
     

     </ul>
</div>



{Object.keys（user.map）（函数名）{
返回
{name}:{user[name]}
})}

用户
是一个对象，而不是数组，因此它没有
.map（）
方法。谢谢@NickParsons，但是，我如何在ul li中打印。您的代码中没有任何内容的列表，因此不清楚要打印哪些内容的列表。如果要打印用户列表，则需要更改状态以存储对象数组，而不仅仅是一个对象。添加用户时，可以将其附加到状态数组中