ReactJS中向对象数组内子数组添加元素报错的解决方法

错误原因分析 #

出现Uncaught TypeError: clientList[currentClientIdx].purchaseList.push is not a function的核心原因有三个：

1. React状态更新的异步性：调用setPurchase后立刻访问purchase，拿到的是更新前的旧值（初始为undefined），导致后续操作异常。
2. 违反React状态不可变性原则：直接修改props传递的clientList对象，既不符合React状态管理规范，也可能导致组件无法重新渲染。
3. 类属性初始化问题：purchaseList作为类字段定义，在部分编译环境下可能无法被正确初始化到实例上，导致该属性不存在或类型异常。

具体解决方案 #

1. 修正Client类的属性初始化 #

将purchaseList移到constructor内部初始化，确保每个Client实例都能正确拥有该数组属性：

class Client {
  constructor(id, username, password, moneyAmount) {
    this.id = id;
    this.username = username;
    this.password = password;
    this.moneyAmount = moneyAmount;
    this.purchaseList = []; // 确保实例化时必初始化数组
  }
}

2. 重构Action组件，遵循状态不可变性 #

子组件不直接修改父组件的state，而是通过回调函数让父组件完成更新；同时去掉不必要的purchase状态，直接在处理函数中创建对象：

import React, { useState } from 'react'

export default function Action({ clientList, currentClientIdx, updateClientList }) {
    const [company, setCompany] = useState('');
    const [amount, setAmount] = useState('');
    
    const handlePurchase = () => {
      // 直接创建新的采购对象
      const newPurchase = { 
        company: company, 
        amount: parseInt(amount) // 转换为数字类型
      };
      
      // 1. 复制原clientList数组，避免直接修改原state
      const updatedClientList = [...clientList];
      // 2. 复制目标Client实例，保持不可变性
      const targetClient = updatedClientList[currentClientIdx];
      const updatedClient = {
        ...targetClient,
        // 3. 复制原purchaseList并添加新元素，不修改原数组
        purchaseList: [...targetClient.purchaseList, newPurchase]
      };
      
      // 更新数组中的目标实例
      updatedClientList[currentClientIdx] = updatedClient;
      // 调用父组件的回调函数更新state
      updateClientList(updatedClientList);
    }

    return (
        <div>
            <input 
                type="text" 
                placeholder='Company'  
                onChange={(e) => setCompany(e.target.value)}
                value={company} // 改为受控组件，避免状态不一致
            />
            <input 
                type="number" 
                placeholder='Amount' 
                onChange={(e) => setAmount(e.target.value)} 
                value={amount} // 改为受控组件
            />
            <button onClick={handlePurchase}>Purchase</button>
        </div>
    )
}

3. 父组件传递更新回调 #

在父组件（如App.js）中定义更新state的函数，并传递给Action组件：

// App.js示例代码
import React, { useState } from 'react';
import Action from './Action';
import Client from './Client';

export default function App() {
  // 初始化clientList状态
  const [clientList, setClientList] = useState([
    new Client(1, 'user1', 'pass1', 1000),
    new Client(2, 'user2', 'pass2', 2000)
  ]);
  const [currentClientIdx, setCurrentClientIdx] = useState(0);

  // 定义更新clientList的回调函数
  const updateClientList = (newClientList) => {
    setClientList(newClientList);
  };

  return (
    <div className="App">
      <Action 
        clientList={clientList} 
        currentClientIdx={currentClientIdx} 
        updateClientList={updateClientList} 
      />
    </div>
  );
}

关键注意事项 #

• 保持状态不可变性：永远不要直接修改React state或props中的对象/数组，必须通过创建新副本的方式更新，否则组件无法触发重新渲染。
• 避免依赖异步状态的即时访问：useState的更新是异步的，调用setXxx后立刻访问xxx得到的是旧值，直接在处理函数中创建所需对象即可。
• 受控组件规范：表单输入绑定value和onChange，确保输入状态与组件状态一致，避免出现异常值。

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