推送API数据到嵌套数组渲染时对象属性undefined问题求助

问题根因 #

• 你往myClients数组中存入的是字符串类型的JSON片段，不是可直接访问属性的JS对象，因此读取card.userId这类属性时自然返回undefined
• 手动拼接JSON字符串的操作完全多余，API返回的response.data[i]本身就是现成的JS对象，直接提取所需属性即可
• 你使用的JSON.parse(JSON.stringify(newClient))是无效操作：newClient本身是字符串，序列化后仍为字符串，反序列化也不会得到目标对象，只会保留原字符串内容
• RenderCard本身的逻辑没有问题，只要传入的card是合法JS对象即可正常渲染

修正方案 #

基础版（非React框架场景） #

function AddClients(response){
    const users = response.data;
    const myId = parseInt(getUserId())
    // 清空原有数据，避免重复添加（可根据业务需求调整）
    myClients = []
    // 用filter筛选符合条件的用户，比for循环更简洁易读
    const matchedClients = users.filter(user => user.personalTrainerId === myId)
    // 直接提取所需属性构造对象推入数组，得到的都是可直接访问属性的JS对象
    matchedClients.forEach(user => {
        myClients.push({
            userId: user.userId,
            firstName: user.firstName,
            lastName: user.lastName,
            email: user.email
        })
    })
    
    console.log("MyClients最终结构: ", myClients); // 可在此打印验证结构是否符合预期
    myClients.map(RenderCard)
}

React框架专属优化 #

如果你是在React项目中开发，myClients需要声明为state变量，不能直接调用push修改数组，需用state更新方法触发渲染：

import { useState } from 'react'

// 组件内声明state
const [myClients, setMyClients] = useState([])

function AddClients(response){
    const users = response.data;
    const myId = parseInt(getUserId())
    // 链式调用筛选+构造目标对象，一步得到最终数组
    const targetClients = users
        .filter(user => user.personalTrainerId === myId)
        .map(user => ({
            userId: user.userId,
            firstName: user.firstName,
            lastName: user.lastName,
            email: user.email
        }))
    // 用set方法更新state，自动触发重渲染
    setMyClients(targetClients)
}

// 组件render部分直接写映射逻辑即可，无需手动调用触发渲染
return (
  <div className="card-container">
    {myClients.map(RenderCard)}
  </div>
)

新手通用调试技巧 #

• 优先打印变量的完整结构和类型：比如在RenderCard第一行加console.log('当前card内容：', card, '类型：', typeof card)，可快速定位你之前拿到的是字符串而非对象的问题
• 每次修改完数据后打印完整的myClients数组，检查每个元素的结构是否符合预期
• 不要手动拼接JSON字符串，直接操作JS对象属性比拼接字符串安全且高效

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