无法在自定义挂钩中访问从 axios 返回的对象值答案

【问题标题】：Cant access object value returned from axios in custom hooks无法在自定义挂钩中访问从 axios 返回的对象值
【发布时间】：2020-08-04 06:34:12
【问题描述】：

您好，我正在编写代码以在自定义挂钩中使用 axios 获取 JSON 并返回值，但即使对象属性存在，我也无法访问它。

我一直在尝试访问 item.title 或 item["title"] 甚至 JSON.parse() 但 parse() 返回跨源错误。

customHooks.js

import { useState, useEffect } from "react";
import axios from "axios";

const GetPost = (id) => {
  const [post, setPost] = useState();
  useEffect(() => {
    axios.get(`http://localhost:8000/post/${id}`).then((res) => setPost(res));
  }, []);

  return post;
};

export default GetPost;

调用钩子并且我想访问对象的函数：

import React from "react";
import getPost from "../customHooks/GetPost";

import { Jumbotron, Container } from "react-bootstrap";

const PostDetail = (props) => {
  const item = getPost(props.match.params.id);

  console.log(item); // i can access the object
  console.log(item.title); //TypeError: Cannot read property 'title' of undefined
  return (
    <Jumbotron fluid>
      <Container>
        {/* <h1>{item.title}</h1>
        <p>{item.description}</p> */}
      </Container>
    </Jumbotron>
  );
};

export default PostDetail;

来自服务器http://localhost:8000/post/post_5e9cbf07b44c7 的实际响应是：

{
    "message": "success",
    "item": {
        "post_id": "post_5e9cbf07b44c7",
        "title": "Asperiores.",
        "description": "Porro iure aliquam laborum veniam quis vel. At itaque voluptas voluptas natus eligendi aut facilis.",
        "content": "lorem ipsum",
        "img_url": "https://lorempixel.com/100/100/cats/?61693",
        "created_by": "user_5e9cbf07b48fc",
        "created_at": "2020-04-19 21:13:43",
        "updated_at": "2020-04-19 21:13:43"
    }
}

PostDetail.js 中console.log(item) 的值为：

{
  "data": {
    "message": "success",
    "item": {
      "post_id": "post_5e9cbf07b44c7",
      "title": "Asperiores.",
      "description": "Porro iure aliquam laborum veniam quis vel. At itaque voluptas voluptas natus eligendi aut facilis.",
      "content": "lorem ipsum.",
      "img_url": "https://lorempixel.com/100/100/cats/?61693",
      "created_by": "user_5e9cbf07b48fc",
      "created_at": "2020-04-19 21:13:43",
      "updated_at": "2020-04-19 21:13:43"
    }
  },
  "status": 200,
  "statusText": "OK",
  "headers": {
    "cache-control": "no-cache, private",
    "content-type": "application/json"
  },
  "config": {
    "url": "http://localhost:8000/post/post_5e9cbf07b44c7",
    "method": "get",
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1
  },
  "request": {}
}

提前致谢:)

【问题讨论】：

试试console.log(item.data.item.title)
您不仅需要访问item.title，还需要访问data.item.title

标签： javascript reactjs axios react-hooks es6-promise

【解决方案1】：

当您尝试访问返回的值时会出现问题，因为在初始渲染时该值不可用，因为效果在渲染周期后运行，而且 axios 请求是异步的。

但是，如果您在自定义挂钩中实际将状态初始化为对象，它将起作用

还要确保在状态中设置res.data.item 而不是res。发帖说可以用item.title获取值

旁注：

请确保在自定义钩子名称前加上 use，这实际上有助于 eslint 找出自定义钩子或函数之间的区别。

此外，由于您正在基于参数 id 进行 API 调用，我建议您将该 id 作为依赖项传递给自定义挂钩中的 useEffect，以便 id 更改的场景也可以无缝工作

import { useState, useEffect } from "react";
import axios from "axios";

const useGetPost = (id) => {
  const [post, setPost] = useState({}); // initialize here
  useEffect(() => {
    axios.get(`http://localhost:8000/post/${id}`).then((res) => setPost(res.data.item));
  }, [id]); // pass id as a dependency here

  return post;
};

export default useGetPost;

在 PostDetail 组件中使用它

import React from "react";
import useGetPost from "../customHooks/GetPost";

import { Jumbotron, Container } from "react-bootstrap";

const PostDetail = (props) => {
  const item = useGetPost(props.match.params.id);

  console.log(item); 
  console.log(item.title);
  return (
    <Jumbotron fluid>
      <Container>
        {/* <h1>{item.title}</h1>
        <p>{item.description}</p> */}
      </Container>
    </Jumbotron>
  );
};

export default PostDetail;

【讨论】：