ReactJS：初始渲染时props未加载，无法对undefined变量执行map操作

你的问题本质是全局状态初始化时profile为null，异步拉取数据完成前的第一次渲染直接调用null的map方法触发报错，数据拉取完成后全局状态更新触发第二次渲染，此时profile有值所以运行正常。以下方案均不需要引入useState/useEffect，不会产生额外状态和重渲染：

• 方案1：解构props时设置默认fallback值
  直接在解构props的阶段给profile设置兜底值，代码改动最小：

const ProfileForm12 = (props) => {
  // 若profile为数组就设置默认空数组，为对象就设置默认空对象{}
  const { profile = [] } = props
  ...
  profile.map(x=>console.log(x))
}
export default ProfileForm12 

• 方案2：使用可选链做访问防护
  不需要修改解构逻辑，直接在调用方法前加可选链?.避免空值报错，配合空值合并运算符??还可以自定义无数据时的占位内容：

// 方法调用时加防护
profile?.map(x=>console.log(x))

// 渲染时加占位提示
return (
  <div>
    {profile?.map(item => <div key={item.id}>{item.content}</div>) ?? <span>用户信息加载中...</span>}
  </div>
)

• 方案3：父组件侧条件渲染
  不需要修改子组件代码，在父组件引入ProfileForm12的位置加判断，只有当profile有值时才渲染子组件，从根源避免子组件接收到null：

// 父组件对应渲染逻辑
{profile && <ProfileForm12 profile={profile} />}

你之前用if判断无法加载数据的问题，大概率是判断后没有返回占位UI，直接return null或者没有返回内容，补上占位内容即可正常使用：

const ProfileForm12 = (props) => {
  const { profile } = props
  if (!profile) return <div>加载用户信息中，请稍候</div>
  // 后续正常逻辑
  ...
  profile.map(x=>console.log(x))
}

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