React PureComponent props变更未重渲染 姓名显示undefined问题咨询

第一个问题解答 #

只要父组件在数据请求完成后，将获取到的完整item数据作为prop传递给VisitItem组件，React会自动触发重渲染。
你使用的是React.PureComponent，它会自动对传入的props做浅层对比，只要item的引用发生变化（即请求完成后替换为了完整的数据对象），组件就会重新执行render方法渲染最新内容。
你看到的undefined undefined不是没有触发重渲染，而是数据加载完成前的首次渲染阶段，可选链操作符?.在属性不存在时返回的undefined，在模板字符串拼接时会被转为字符串"undefined"，两个空值拼接后就出现了你看到的异常内容，这个中间态被用户感知到了而已。

第二个问题：优化处理方案 #

方案1：父组件增加加载状态判断 #

父组件在数据未加载完成时，不渲染VisitItem组件，改为渲染加载占位符或者骨架屏，从根源上避免用户看到异常中间态：

// 父组件伪代码示例
{
  isDataLoading ? <VisitItemSkeleton /> : <VisitItem item={item} screenType={screenType} />
}

方案2：组件内增加字段兜底逻辑 #

直接在VisitItem的render方法里，对需要展示的字段增加空值兜底，避免undefined被直接转为字符串展示：

// 原姓名展示逻辑修改为
<Text style={componentStyles.mediumText}>
  {`${item?.name?.first?.value || ''} ${item?.name?.last?.value || ''}`.trim() || '加载中'}
</Text>

其余日期、状态、类型等展示字段都可以按照相同逻辑添加兜底文案。

方案3：提前解构设置默认值 #

在render方法开头先对item结构做默认值兜底，减少后续渲染逻辑里的重复空值判断：

render() {
  const { item = {}, screenType } = this.props;
  // 提前解构并设置各层级默认值
  const { 
    type = {}, status = {}, date = {}, name = { first: {}, last: {} } 
  } = item;
  const firstName = name.first.value || '';
  const lastName = name.last.value || '';
  const statusText = statusCodeToText(status.value) || '';
  // 后续渲染直接使用上面定义的变量即可
}

方案4：组件级内容隐藏 #

如果不需要单独的加载占位样式，也可以在判断item数据不完整时，直接返回空View或者给外层容器加隐藏样式，等数据加载完成后再展示完整内容。

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