访问transactions.length触发undefined类型错误该怎么修复

DevOps 小满

2026-10-13

问题修复方案

1. 核心报错修复：上下文取值语法错误

你出现transactions is undefined报错的根本原因是useContext取值时多套了一层不必要的数组解构，TransactionContext返回值是对象不是数组，将Income.js里的取值代码：

let [{ transactions, addTransaction }] = useContext(TransactionContext)

修改为：

const { transactions = [], addTransaction } = useContext(TransactionContext)

这里同时给transactions设置了默认空数组兜底，就算上下文异常也不会触发length读取报错。

2. 按钮点击事件逻辑修复

你两个操作按钮的onPress回调里只写了函数名，没有执行函数，需要改成调用形式：

{/* 收入按钮 */}
<TouchableOpacity rounded style={styles.loginBtn} onPress={(event) =>{
  incomeHandler(event)
  // this.props.navigation.navigate('SignInScreen') 
}} >

{/* 支出按钮 */}
<TouchableOpacity rounded style={styles.loginBtn} onPress={(event) =>{
  expenseHandler(event)
  // this.props.navigation.navigate('SignInScreen') 
}} >

3. React Native输入框取值语法修复

React Native的TextInput没有event.target.value属性，取值需要用onChangeText回调，修改两个输入框代码：

{/* 描述输入框 */}
<TextInput  
  onChangeText={setText}
  value={newText}
/>

{/* 金额输入框 */}
<TextInput  
  onChangeText={val => setAmount(Number(val))}
  value={String(newAmount)}
  keyboardType='numeric' // 增加数字键盘限制，避免非法输入
/>

4. 可选兜底优化（非必须，增强稳定性）

在计算收入支出的逻辑里加上可选链操作符，进一步避免异常：

// 计算总收入
const getIncome = () => {
  let income = 0
  for (var i = 0; i < transactions?.length; i++) {
    if (transactions[i].amount > 0) income += transactions[i].amount
  }
  return income
}

// 计算总支出
const getExpense = () => {
  let expense = 0
  for (var i = 0; i < transactions?.length; i++) {
    if (transactions[i].amount < 0) expense += transactions[i].amount
  }
  return expense
}