axios 的 response.data 可能是双重嵌套结构（如 response.data.data._id），直接访问 response.data._id 会返回 undefined，需先确认响应实际结构再取值。
axios 的 response.data 可能是双重嵌套结构（如 response.data.data._id），直接访问 response.data._id 会返回 undefined，需先确认响应实际结构再取值。
在 React 中使用 Axios 发起 GET 请求时，开发者常假设 response.data 直接对应后端返回的 JSON 主体对象。但实际响应结构可能与预期不符——尤其当后端 API 封装了统一响应格式（如 { success: true, data: { _id: "...", ... } }）或前端误用了拦截器/适配器时，response.data 往往是一个包含 data 字段的对象，而非原始业务数据本身。
例如，你观察到：
console.log(response.data); // 输出 { data: { _id: '6539fb91...', title: 'Scarlet', ... } }这说明真实数据藏在 response.data.data 下，因此：
console.log(response.data._id); // ❌ undefined（因为 _id 不在顶层） console.log(response.data.data._id); // ✅ 正确输出 ID
✅ 推荐调试方式：
始终先打印完整响应对象，明确结构：
axios.get(`http://localhost:5555/books/${id}`)
.then((response) => {
console.log('完整响应:', response); // 查看 response.data 的真实层级
console.log('业务数据:', response.data.data); // 或 response.data.result 等，依实际而定
setBook(response.data.data); // 注意这里也应取嵌套后的 data
console.log('ID:', response.data.data._id);
setLoading(false);
});⚠️ 注意事项：
- 不要依赖 console.log(response.data) 的缩略显示（浏览器控制台常折叠嵌套对象），务必展开查看或用 console.dir(response)；
- 若后端返回结构固定（如统一包裹在 data 字段中），可在 Axios 实例中配置响应拦截器自动解包：
axios.interceptors.response.use( (response) => response.data.data || response.data, // 自动提取 data.data 或 fallback (error) => Promise.reject(error) );
- 在 useEffect 中，确保 id 有值且非空字符串/undefined，避免请求无效 URL 导致后端返回异常结构。
总结：response.data._id 为 undefined 的根本原因不是 React 状态异步问题，而是响应数据结构为嵌套形式。养成「先查结构、再取值」的习惯，可大幅减少此类低级错误。
