如何在input标签中设置默认值？解决拼接姓名出现NaN的问题

问题原因 #

出现NaN的核心原因有两个：

1. 初始状态userInfo设为了数组[]，但接口返回的是对象类型，导致初始时userInfo?.profile为undefined，userInfo?.profile?.firstName和userInfo?.profile?.lastName也都是undefined，用+拼接两个undefined会得到NaN。
2. 即使数据加载完成，若某个字段（比如firstName或lastName）不存在，直接用+拼接也会因为undefined导致出现NaN。

解决方案 #

1. 修正初始状态

把useState的初始值从数组改成空对象，和接口返回的数据类型匹配：

const [userInfo, setUserInfo] = useState({});

2. 安全拼接字符串

用模板字符串配合空值兜底，确保即使字段不存在也不会出现NaN：

<input 
  type="text" 
  defaultValue={`${userInfo?.profile?.firstName || ''} ${userInfo?.profile?.lastName || ''}`} 
  className="form-control bg-light" 
  id="exampleInputName" 
  aria-describedby="name"
/>

或者用+拼接的写法，同样给每个字段加兜底：

<input 
  type="text" 
  defaultValue={(userInfo?.profile?.firstName || '') + ' ' + (userInfo?.profile?.lastName || '')} 
  className="form-control bg-light" 
  id="exampleInputName" 
  aria-describedby="name"
/>

这样处理后，不管是初始加载阶段还是字段缺失的情况，输入框都会显示正常的名字+空格+姓氏，不会出现NaN。

内容的提问来源于stack exchange，提问作者Irfanul Islam Fahim