组件渲染时Prop返回Null，求助按钮启用/禁用逻辑实现

嘿，我太懂这种异步数据加载踩的坑了！核心问题就是父组件异步拉取用户数据的时候，子组件已经先渲染了，这时候拿到的user props还是null，直接用user.credits && ...不仅会报错，还会导致按钮状态判断完全失效。咱们一步步来解决：

1. 先给父组件加个加载状态处理 #

父组件在异步请求完成前，要么给子组件传一个兜底的默认值，要么先不渲染子组件，避免子组件拿到null：

父组件示例代码 #

import { useState, useEffect } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 模拟异步获取用户信息
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data))
      .catch(err => console.error(err));
  }, []);

  // 方案A：给子组件传兜底默认值，避免null
  return (
    <div>
      <ChildComponent user={user || { credits: 0 }} />
    </div>
  );

  // 方案B：等user加载完成再渲染子组件
  // return (
  //   <div>
  //     {user ? <ChildComponent user={user} /> : <p>加载中...</p>}
  //   </div>
  // );
}

export default ParentComponent;

2. 子组件里做空值保护+状态判断 #

不管父组件有没有处理加载状态，子组件自己也应该做一层防御性判断，避免访问null的属性。这里用可选链?.配合逻辑判断会很方便：

子组件示例代码 #

function ChildComponent({ user }) {
  // 判断逻辑：如果user存在且credits >=1，按钮启用；否则禁用
  const isButtonEnabled = user?.credits > 0;

  return (
    <button disabled={!isButtonEnabled}>
      {isButtonEnabled ? '使用Credit' : '无可用Credit'}
    </button>
  );
}

export default ChildComponent;

额外优化小技巧 #

如果你的项目里经常遇到这种异步数据的判断，可以封装一个自定义Hook来处理加载、成功、失败状态，这样代码更整洁，也能统一处理加载提示和错误情况。

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