React Hooks页面迭代时如何在nomineeFirstName和nomineeLastName间加空格

问题原因 #

你判断对象是否存在对应属性时，拼接姓名加了中间空格，但后续给newGroup创建、读取属性键名时没有加空格，判断逻辑和属性操作的键名不匹配，空格自然不会显示在最终渲染的姓名上。

修正方案 #

统一三处姓名拼接的规则，提前定义带空格的完整姓名字段作为统一键名即可：

const [nominationGroup, setNominationGroup] = useState({});

if (isMounted.current) {
  for (const elem of res.data) {
    // 统一使用带空格的完整姓名作为键名
    const fullName = elem.nomineeFirstName + " " + elem.nomineeLastName;
    if (!newGroup.hasOwnProperty(fullName)) {
      newGroup[fullName] = {
        createdAt: "",
        reason: [],
      };
    }
    newGroup[fullName].reason.push(elem.reason);
    newGroup[fullName].createdAt = elem.createdAt;
  }
  setNominationGroup(newGroup);
  // 小优化：用逗号替代加号打印对象，避免显示为[object Object]
  console.log("Nomination data from server :", res.data);
} 

可选优化点 #

你当前的渲染代码存在两处不规范的写法，可以同步调整：

1. 循环生成的元素key需要放在map返回的根节点上，不能放在子节点
2. 循环生成的元素不能使用固定id，会导致页面出现重复id，建议改为class
3. 不要嵌套li标签，不符合HTML规范

{Object.keys(nominationGroup).map((nomineename) => (
    // key放在根元素上
    <div className='wrap' key={nomineename}>
      {/* 固定id改为class，避免重复 */}
      <div className='sidebar-left'>
        {nomineename}
      </div>
      <div className='main-content'>
        {/* 补充ul作为li的父容器，去掉嵌套的li */}
        <ul>
          {nominationGroup[nomineename].reason.map((desc) => (
            <li key={desc} className='nomlistdata'>
              {desc}
            </li>
          ))}
        </ul>
      </div>
      <div className='sidebar-right'>
        {moment(nominationGroup[nomineename].createdAt).format(
          "DD-MMM-YYYY"
        )}
      </div>
      <hr />
    </div>
  ))}

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