React Native渲染报错undefined is not an object(data[0])修复方案

问题场景 #

开发React Native页面时触发渲染报错：Render Error: undefined is not an object (evaluating 'data[0]')。
经排查，业务逻辑中data数组最终会返回索引0-4共5项元素，组件需要读取索引0、1位的元素渲染对应业务模块。

原问题代码（RenderDesc组件） #

const RenderDesc = () => (
<Div mx={widthPercentageToDP(5)}>
    {data[0]?.data.length > 0 ? (
      <>
        <Text
          fontWeight="bold"
          fontSize={hp(2)}
          mt={hp(2)}
          allowFontScaling={false}
        >
          Ranking
        </Text>
        <Div alignItems="center" justifyContent="center">
        <FlatList horizontal data={data[0]?.data} renderItem={({item}) => (
          <Div mx={5} borderWidth={1} rounded={10} borderColor={COLOR_PRIMARY}  p={5} mt={10}>
            <Text
              textAlign="center"
              mt={hp(1)}
              color="#EBD200"
              fontWeight="bold"
              fontSize={20}
              allowFontScaling={false}
            >
              {item?.rank}
            </Text>
            <Text
              textAlign="center"
              mt={hp(1)}
              mb={hp(1)}
              w={wp(24)}
              color="#979797"
              fontSize={10}
              allowFontScaling={false}
            >
            {item?.source}
            </Text>
          </Div>
        )}/>
        </Div>
      </>
      ): null}
      <Text
          fontWeight="bold"
          mt={hp(5)}
          fontSize={hp(2)}
          allowFontScaling={false}
        >
          Deskripsi
      </Text>
      <WYSIWYG body={data[1]?.data} />
</Div>
);

根因分析 #

报错是典型的异步渲染时序问题：

• 组件首次渲染时，异步请求/赋值的data还未完成初始化，此时data值为undefined
• 代码直接执行data[0]下标访问，对undefined做属性读取就会触发JS报错
• 排查时看到data有5个元素，是数据赋值完成后触发二次渲染的状态，但首次渲染的报错已经导致页面崩溃

修复方案 #

在所有访问data数组下标的逻辑前，增加data的存在性校验，利用&&短路逻辑：当data为undefined/null等假值时，直接跳过后续下标访问，等数据赋值完成后组件自动重渲染即可正常展示。
修复后代码如下：

const RenderDesc = () => (
<Div mx={widthPercentageToDP(5)}>
    {data && data[0]?.data.length > 0 ? (
      <>
        <Text
          fontWeight="bold"
          fontSize={hp(2)}
          mt={hp(2)}
          allowFontScaling={false}
        >
          Ranking
        </Text>
        <Div alignItems="center" justifyContent="center">
        <FlatList horizontal data={data[0]?.data} renderItem={({item}) => (
          <Div mx={5} borderWidth={1} rounded={10} borderColor={COLOR_PRIMARY}  p={5} mt={10}>
            <Text
              textAlign="center"
              mt={hp(1)}
              color="#EBD200"
              fontWeight="bold"
              fontSize={20}
              allowFontScaling={false}
            >
              {item?.rank}
            </Text>
            <Text
              textAlign="center"
              mt={hp(1)}
              mb={hp(1)}
              w={wp(24)}
              color="#979797"
              fontSize={10}
              allowFontScaling={false}
            >
            {item?.source}
            </Text>
          </Div>
        )}/>
        </Div>
      </>
      ): null}
      <Text
          fontWeight="bold"
          mt={hp(5)}
          fontSize={hp(2)}
          allowFontScaling={false}
        >
          Deskripsi
      </Text>
      <WYSIWYG body={data && data[1]?.data} />
</Div>
);

同类异步数据渲染场景，都建议对依赖的异步值提前做空值校验，也可以结合可选链?.、空值合并??做更完善的边界保护，避免时序问题导致的渲染报错。

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