React中无法访问user_daily_status对象属性的问题求助

尝试访问user_daily_status._id时触发上述错误，该变量预期包含的对象结构如下文所示。

相关代码片段 #

查找状态的函数 #

function getUserStatus(username) {
    const status = dailyStatus.find(function (ds) {
      if (ds.username === username) {
        console.log(ds);
        return ds;
      }
      // return ds.username == username;
    });
    return status;
  }

渲染代码 #

{users.map((user, index) => {
        console.log(user);
        let user_daily_status = getUserStatus(user);
        console.log(user_daily_status._id);

        return (
          <tr>
            <td>{user}</td>
            <td>{console.log(user_daily_status)}</td>
          </tr>
        );
      })}

user_daily_status预期的对象结构 #

user_daily_status = {
        "_id": "669d3c92fd117c2db8492d4d",
        "username": "test",
        "date": "21/7/2024",
        "status": [
            {
                "tag": "tag1",
                "status": "test333",
                "_id": "669d3c92fd117c2db8492d4e"
            },
            {
                "tag": "tag2",
                "status": "11",
                "_id": "669d3c92fd117c2db8492d4f"
            },
            {
                "tag": "tag3",
                "status": "sbbbd",
                "_id": "669d3c92fd117c2db8492d50"
            },
            {
                "tag": "tag4",
                "status": "sssss",
                "_id": "669d3c92fd117c2db8492d51"
            },
            {
                "tag": "tag5",
                "status": "sss",
                "_id": "669d3c92fd117c2db8492d52"
            }
        ],
        "__v": 0
    }

解决方案 #

1. 修复find回调的返回值逻辑 #

Array.find()的回调必须返回布尔值来判断当前项是否匹配，你当前返回匹配对象的写法虽然能触发匹配，但逻辑不规范。修改getUserStatus函数：

function getUserStatus(username) {
    return dailyStatus.find(ds => ds.username === username);
}

2. 处理未找到匹配项的场景 #

当users中的某个用户在dailyStatus里没有对应记录时，user_daily_status会是undefined，此时直接访问_id必然报错，需要添加判断：

方式一：使用可选链操作符（推荐）

{users.map((user, index) => {
        let user_daily_status = getUserStatus(user);
        // 可选链会自动处理undefined的情况
        console.log(user_daily_status?._id);

        return (
          <tr>
            <td>{user}</td>
            <td>{user_daily_status?._id || '无状态记录'}</td>
          </tr>
        );
      })}

方式二：显式条件判断

{users.map((user, index) => {
        let user_daily_status = getUserStatus(user);
        if (user_daily_status) {
            console.log(user_daily_status._id);
        } else {
            console.log(`用户${user}无状态记录`);
        }

        return (
          <tr>
            <td>{user}</td>
            <td>{user_daily_status ? user_daily_status._id : '无状态记录'}</td>
          </tr>
        );
      })}

3. 性能优化：提前构建状态映射 #

如果dailyStatus数据量较大，每次map都调用find会重复遍历数组，性能低下。可以提前构建一个以用户名作为键的映射表：

// 初始化时构建映射
const statusMap = {};
dailyStatus.forEach(ds => {
    statusMap[ds.username] = ds;
});

// 修改getUserStatus为直接取值
function getUserStatus(username) {
    return statusMap[username];
}

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