React银行应用新用户存取款报错：Cannot read properties of undefined (reading 'push')

问题详情 #

• 开发背景：JavaScript新手，基于React开发银行应用
• 核心问题：新创建用户后无法执行存取款操作，All Data页面交易列表不更新，报错：

  An unhandled error was caught from submitForm() TypeError: Cannot read properties of undefined (reading 'push')

• 测试现象：删除actions.js中deposit函数内的user.transactions.push相关代码后，程序可正常运行，但交易记录无法同步到All Data页面；使用预设用户登录时，所有功能均正常。

问题根源 #

预设用户的对象中提前初始化了transactions数组，而新创建的用户未配置该属性，导致调用.push()方法时，因user.transactions为undefined触发类型错误。

解决方案 #

1. 创建新用户时强制初始化transactions数组 #

在新用户创建逻辑中，为每个用户添加空的transactions数组，确保属性存在：

// 创建新用户的示例代码
const createNewUser = (userInfo) => {
  const newUser = {
    id: Date.now().toString(),
    name: userInfo.name,
    balance: 0,
    transactions: [] // 初始化空交易数组
  };
  // 将新用户存入状态或本地存储
  saveUserToStorage(newUser);
};

2. 修复deposit函数的安全调用逻辑 #

在actions.js的deposit函数中，先检查transactions是否存在，不存在则初始化，再执行push操作：

export const deposit = (user, amount) => {
  // 确保transactions数组存在，不存在则赋值为空数组
  const transactions = user.transactions || [];
  const updatedTransactions = [
    ...transactions,
    {
      type: 'deposit',
      amount,
      date: new Date().toLocaleString()
    }
  ];

  const updatedUser = {
    ...user,
    balance: user.balance + amount,
    transactions: updatedTransactions
  };

  // 更新用户存储（如localStorage或全局状态）
  updateUserInStorage(updatedUser);
  return updatedUser;
};

3. 确保All Data页面监听数据变化 #

在alldata.js中，确认组件正确监听用户数据的状态更新，比如使用Context或状态管理工具，确保交易数组变化时页面自动重新渲染：

import { useContext } from 'react';
import { GlobalContext } from '../contexts/GlobalContext';

const AllData = () => {
  const { users } = useContext(GlobalContext);

  return (
    <div className="all-data">
      <h2>所有用户交易记录</h2>
      {users.map(user => (
        <div key={user.id} className="user-transactions">
          <h3>{user.name}</h3>
          <ul>
            {user.transactions.map((tx, index) => (
              <li key={index}>
                {tx.type}：${tx.amount} | {tx.date}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default AllData;

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