React中使用for in循环渲染多HTML标签的正确方式（解决仅显首个内容问题）

你的代码只显示第一个名字的原因很直接：fullName函数的for-in循环里，第一次迭代就执行了return语句，直接终止了函数，循环后续的迭代根本没机会运行，自然只返回了第一个姓名对应的<span>。

下面是几种正确的实现方式：

方法1：用Object.values遍历属性值 #

直接提取对象的所有属性值，通过map生成对应的元素数组，注意给每个元素添加唯一key（这里用索引作为key，若属性值可能重复，建议用属性名）：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [annie, renameAnnie] = useState({
    firstname: "Annie",
    middlename: "Rose",
    lastname: "Markham"
  });

  return (
    <>
      {Object.values(annie).map((namePart, index) => (
        <span key={index}>{namePart} </span>
      ))}
    </>
  );
}

如果要保留fullName函数，也可以这么写：

const fullName = () => {
  return Object.values(annie).map((namePart, index) => (
    <span key={index}>{namePart} </span>
  ));
};

方法2：明确指定属性顺序（更可控） #

如果需要严格按照firstname→middlename→lastname的顺序渲染（避免对象属性隐式排序的不确定性），可以先定义属性名数组，再遍历：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [annie, renameAnnie] = useState({
    firstname: "Annie",
    middlename: "Rose",
    lastname: "Markham"
  });
  // 明确指定属性顺序
  const nameFields = ["firstname", "middlename", "lastname"];

  return (
    <>
      {nameFields.map(field => (
        <span key={field}>{annie[field]} </span>
      ))}
    </>
  );
}

这种方式的优势是渲染顺序完全由你控制，不会因为对象属性的默认排序问题导致显示顺序错乱。

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