如何为服务端返回的数据设置默认值，避免组件内重复编写条件判断？

完全可以在getUser接口请求的环节统一处理字段默认值，实现组件内无需额外判断直接取值的效果，具体实现如下：

核心思路 #

拿到接口返回的用户数据后，先对可能为null的字段做空值兜底处理，再存入state，同时调整TS类型保证类型安全。

代码实现 #

1. 首先调整User接口定义，因为我们已经统一处理了name为null的情况，所以可以移除类型中的null声明：

interface User {
  name: string,
  email: string,
  age: number,
}

2. 定义全局统一的默认值，修改getUser的逻辑，对返回数据做兜底处理后再更新state：

// 统一定义默认值，后续修改默认值只需要改这里即可
const DEFAULT_USER = {
  name: '默认用户名'
}

const [user, setUser] = useState<User>();

const getUser = async () => {
  try {
    const response = await API.getUserData();
    // 合并处理数据：接口返回非null值优先，否则使用默认值
    const processedUser = {
      ...response,
      name: response.name ?? DEFAULT_USER.name
    }
    setUser(processedUser);
  } catch (error) {
    console.log(error)
  }
}

注意：直接用扩展运算符合并默认值和接口返回值时，如果接口返回的字段是null，会覆盖默认值中的对应字段，所以需要单独用空值合并运算符??做兜底处理。

多字段兜底扩展方案 #

如果后续有多个字段需要做类似的null/undefined兜底，可以封装通用的合并函数，简化代码：

function mergeWithDefault<T extends object>(response: T, defaults: Partial<T>) {
  const result = {...defaults, ...response};
  Object.keys(defaults).forEach(key => {
    result[key as keyof T] = response[key as keyof T] ?? defaults[key as keyof T];
  })
  return result as T;
}

使用时直接调用函数即可：

const processedUser = mergeWithDefault(response, {
  name: '默认用户名',
  // 其他需要兜底的字段直接在这里加即可
  // address: '默认地址'
})
setUser(processedUser);

处理完成后，所有组件内直接使用{user.name}即可，不需要再加额外的判断逻辑。

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