React Native中为何无法直接访问MongoDB返回的嵌套对象属性

问题原因 #

1. React 状态更新是异步的
   setResults 属于 React 的状态更新方法，调用后不会立刻修改当前作用域下的 results 变量，你紧接着打印 results._id 时，拿到的还是更新前的初始值（通常是初始定义的空数组/空值），自然无法读取到属性。

2. 返回值是数组不是单个对象
   你请求的 /workouts 接口返回的是训练计划列表数组，不是单个训练计划对象，哪怕等 results 状态更新完成，直接访问数组的 _id 属性也是不存在的，只有数组内的每个元素（单个训练计划对象）才携带 _id 属性。

解决方案 #

场景1：拿到接口返回值后立刻使用

直接读取请求返回的 response 即可，不需要走状态读取：

const workAPI = async () => {
  const response = await trackerAPI.get("/workouts");
  setResults(response);
  // 取第一个训练计划的_id，根据需求调整索引即可
  console.log(response[0]._id);
}

场景2：依赖更新后的state执行操作

用 useEffect 监听 results 的变化，状态更新后再执行对应逻辑：

useEffect(() => {
  // 先判断数组非空再读取，避免报错
  if (results?.length) {
    console.log(results[0]._id);
  }
}, [results])

场景3：批量渲染所有训练计划的_id

这种情况才需要用 map 遍历数组：

results.map(workout => <div key={workout._id}>{workout._id}</div>)

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