React 18中如何通过Props正确初始化子组件的State变量？

你的核心问题是：用useEffect初始化state会导致首次渲染时state还是初始的null/0，因为useEffect是在组件渲染完成后才执行的，这就会让JSX里的内容拿到未就绪的数据。结合你需要支持用户修改state的需求（react-select），给你两种针对性的解决方案：

方案一：直接用Props作为State的初始值（最优，适合仅初始化场景） #

如果props只是用来初始化state，后续父组件的props更新不需要同步到子组件的state（毕竟用户会自己修改），直接把props作为useState的初始值是最直接的方式，这样首次渲染时state就会有正确值，完全避免useEffect带来的延迟。

为了避免每次渲染都执行判断逻辑，推荐用函数式初始化（useState(() => {...})）：

const ChildComp = (props) => {
  // 函数式初始化：仅在组件挂载时执行一次判断
  const [selectedTenant, setSelectedTenant] = useState(() => {
    if (props.scheduleID && props.scheduleID > 0) {
      return props.selectedSchedule.TenantID;
    }
    return null;
  });

  const [scheduleID, setScheduleID] = useState(() => {
    return props.scheduleID && props.scheduleID > 0 ? props.scheduleID : 0;
  });

  // react-select的修改逻辑
  const handleTenantChange = (selectedOption) => {
    setSelectedTenant(selectedOption.value);
  };

  return (
    <div>
      {/* 首次渲染就能拿到正确的初始值，不用再处理null/0的临时状态 */}
      <select value={selectedTenant} onChange={handleTenantChange}>
        {/* 你的选项列表 */}
      </select>
    </div>
  );
};

方案二：同步Props更新到State（适合props动态变化的场景） #

如果父组件后续可能更新scheduleID或selectedSchedule，需要同步到子组件的state，那就要给useEffect加上正确的依赖项，而不是空数组：

const ChildComp = (props) => {
  const [selectedTenant, setSelectedTenant] = useState(null);
  const [scheduleID, setScheduleID] = useState(0);

  // 当props变化时同步更新state
  useEffect(() => {
    if (props.scheduleID && props.scheduleID > 0) {
      setScheduleID(props.scheduleID);
      setSelectedTenant(props.selectedSchedule.TenantID);
    } else {
      // 重置到初始状态
      setScheduleID(0);
      setSelectedTenant(null);
    }
  }, [props.scheduleID, props.selectedSchedule]); // 必须加入依赖项

  // 用户修改逻辑
  const handleTenantChange = (val) => setSelectedTenant(val);

  return <div>{/* JSX内容 */}</div>;
};

⚠️ 注意：这种方案会在props更新时覆盖用户手动修改的state，如果需要避免，可以在useEffect里加判断，比如只有当state是初始值时才同步，或者给用户显示确认提示。

你当前代码的问题分析 #

你用了空数组的useEffect，它只会在组件首次挂载后执行一次，而首次渲染时state还是你设置的null/0，这就是为什么你看到数据未就绪的原因——JSX在useEffect执行前就已经渲染了。

额外注意点 #

如果父组件的props是异步获取的（比如从API拉取），那首次渲染时props可能还没就绪，这时候不管用哪种方案，都要在JSX里处理加载状态，比如：

{selectedTenant === null ? <div>加载中...</div> : <你的内容组件 />}

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