React/TS中Cannot read property 'value' of null报错排查与修复

报错原因 #

1. 函数逻辑错误：原backgroundColorResolver函数内部遍历整个allQuestions数组，但未返回遍历结果，函数默认返回undefined。更关键的是，这个函数的设计完全不符合需求——你需要的是根据单个问题的数值返回颜色，而非遍历整个数组。
2. 函数调用错误：渲染时你直接将函数对象转成字符串（${backgroundColorResolver}），没有调用函数。这会导致backgroundColor的值是函数的字符串形式（比如"function backgroundColorResolver() { ... }"），不是合法的颜色值，React Native解析样式时因此抛出异常。
3. 样式值不合法：margin: "0.5"缺少单位，React Native中样式的数值要么用不带单位的数字（默认dp），要么明确指定单位（如"0.5px"），否则会引发样式解析错误。

正确实现步骤 #

1. 重构颜色解析函数 #

修改函数，让它接收单个数值参数，返回对应颜色：

const backgroundColorResolver = (value: number) => {
  if (value <= 4) return "#EE7362";
  if (value > 4 && value < 7) return "#FDCF5B";
  return "#068466";
};

2. 修正渲染代码 #

• 调用backgroundColorResolver并传入当前项的averageAnswerValue
• 修正margin的单位问题
• 将key放在map遍历的最外层组件上（符合React列表渲染规范）

<View style={questionAverageResultStyling.indexContainer}>
  {allQuestions.map(({ averageAnswerValue, key }) => (
    <View
      key={key}
      style={{
        backgroundColor: backgroundColorResolver(averageAnswerValue),
        margin: 0.5, // 或"0.5px"，React Native推荐用数字（dp单位）
        width: "100%",
        height: 25, // 数字默认是dp，也可写"25px"
      }}
    >
      <Text style={questionAverageResultStyling.indexText}>
        {averageAnswerValue}
      </Text>
    </View>
  ))}
</View>

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