ReactJS组件Props未传递问题排查求助

核心问题 #

你的代码存在两个关键问题，导致Props无法同步到MyEmployee的内部State：

1. useState初始值仅生效一次：React组件挂载时，useState会用传入的初始值设置State，后续Props更新不会自动触发State重新赋值。
2. 初始渲染时Props为undefined：App组件初始State是空对象{}，第一次渲染MyEmployee时，employees?.someEmployeeData?.obj等Props均为undefined，MyEmployee会使用默认参数值初始化State；当App获取数据更新State后，MyEmployee的Props虽已更新，但内部State不会自动同步。

解决方案 #

方案1：直接使用Props（推荐，无需内部State） #

如果MyEmployee仅做数据展示，或分页等逻辑由父组件处理，完全不需要将Props存入内部State，直接使用Props即可：

修改后的MyEmployee组件：

import { useState } from "react";

export default function MyEmployee({
  data = [],
  page = 1,
  size = 2,
  total = 0
}) {
  // 移除不必要的内部State，直接使用Props
  return (
    <>
      <h2>Some Employee</h2>
      {data.map((emp) => {
        return (
          <div key={emp.id}>
            <span>{emp.name}</span>
            <span>{emp.email}</span>
          </div>
        );
      })}
      <button>{"<"}</button>
      <span>
        {page} of {Math.ceil(total / size)}
      </span>
      <button>{">"}</button>
    </>
  );
}

方案2：监听Props同步State（需内部维护状态时） #

如果必须在MyEmployee内部修改数据（比如组件自行处理分页逻辑），需要添加useEffect监听Props变化，同步更新内部State：

修改后的MyEmployee组件：

import { useState, useEffect } from "react";

export default function MyEmployee({
  data = [],
  page = 1,
  size = 2,
  total = 0
}) {
  const [myEmployees, setMyEmployees] = useState(data);
  const [currPage, setCurrPage] = useState(page);
  const [rows, setRows] = useState(size);
  const [totalData, setTotalData] = useState(total);

  // 监听Props变化，同步更新对应State
  useEffect(() => {
    setMyEmployees(data);
  }, [data]);

  useEffect(() => {
    setCurrPage(page);
  }, [page]);

  useEffect(() => {
    setRows(size);
  }, [size]);

  useEffect(() => {
    setTotalData(total);
  }, [total]);

  return (
    <>
      <h2>Some Employee</h2>
      {myEmployees.map((emp) => {
        return (
          <div key={emp.id}>
            <span>{emp.name}</span>
            <span>{emp.email}</span>
          </div>
        );
      })}
      <button>{"<"}</button>
      <span>
        {currPage} of {Math.ceil(totalData / rows)}
      </span>
      <button>{">"}</button>
    </>
  );
}

额外优化：App组件状态初始化 #

可以给App组件的初始State设置更贴合数据结构的默认值，避免第一次渲染时Props为undefined：

// App组件的State初始化修改为：
const [employees, setEmployees] = useState({
  someEmployeeData: {
    page: 1,
    size: 2,
    total: 0,
    obj: []
  }
});

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