React父组件传person数据至弹窗组件显示空白问题

1. 修复无效DOM结构 #

你的UpdatePersonForm组件直接在<div>内渲染<tr>，不符合HTML规范，浏览器会自动修正错误结构导致内容无法显示。需将<tr>包裹在<table>和<tbody>中：

export const UpdatePersonForm= ({ person, personEditOnSubmit }) => {
  return (
    <div>
      <table>
        <tbody>
          {person.map((item) => (
            <tr key={item.id}> {/* 必须添加唯一key，避免React渲染警告 */}
              <td>{item.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
   </div>
  );
};

2. 确认父组件传参正确 #

检查父组件使用UpdatePersonForm时，是否正确传递了person属性：

// User.js中调用子组件的代码
<UpdatePersonForm 
  person={person} 
  personEditOnSubmit={yourSubmitHandler} 
/>

若漏传person，子组件会拿到undefined，调用map方法后会出现空白或报错。

3. 同步数据加载与弹窗状态 #

如果弹窗由状态（如isModalOpen）控制显示，需确保打开弹窗时父组件的person数据已加载完成：

• 父组件添加加载状态管理：

const [person, setPerson] = useState([]);
const [loading, setLoading] = useState(true);
const url = "http://localhost:8080/api/persons";

useEffect(() => {
  axios.get(url)
    .then((response) => {
      setPerson(response.data);
      setLoading(false);
    })
    .catch(err => {
      console.error("加载数据失败：", err);
      setLoading(false);
    });
}, [url]);

// 打开弹窗的函数
const openModal = () => {
  if (loading) {
    alert("数据加载中，请稍后");
    return;
  }
  setIsModalOpen(true);
};

• 子组件接收loading状态并处理：

export const UpdatePersonForm= ({ person, personEditOnSubmit, loading }) => {
  if (loading) {
    return <div>加载中...</div>;
  }

  if (person.length === 0) {
    return <div>暂无人员数据</div>;
  }

  return (
    <div>
      <table>
        <tbody>
          {person.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
   </div>
  );
};

4. 验证数据结构一致性 #

分别在父组件和子组件中打印获取到的person数据，确认结构一致：

• 父组件打印：

useEffect(() => {
  axios.get(url).then((response) => {
    console.log("父组件获取的数据：", response.data);
    setPerson(response.data);
  });
}, [url]);

• 子组件自行获取时打印：

useEffect(() => {
  axios.get(url).then((response) => {
    console.log("子组件获取的数据：", response.data);
    setPerson(response.data);
  });
}, [url]);

若两者结构不同（比如父组件拿到的是包含数组的对象而非直接数组），需调整父组件的setPerson逻辑，例如setPerson(response.data.data)。

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