Не удается получить доступ к значению объекта, полученному из ax ios в пользовательских хуках

Question

Привет, я пишу код, чтобы получить JSON с топором ios в пользовательских хуках и вернуть значение, но я не могу получить доступ к свойству объекта, даже если оно было там.

Я был пытаясь получить доступ как 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"
    }
}

Значение console.log(item) в PostDetail. js это:

{
  "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": {}
}

заранее спасибо:)

Answer 1

Проблема возникает, когда вы пытаетесь получить доступ к возвращенному значению, потому что при начальном рендеринге значение недоступно, так как эффект запускается после цикла рендеринга, а также потому, что запрос ax ios является асинхронным c.

* 1002. * Однако это будет работать, если вы фактически инициализируете состояние для объекта в своем пользовательском хуке

Также убедитесь, что вы установили res.data.item в состояние, а не res. Опубликуйте, что вы можете получить значение с помощью item.title

SideNotes:

Пожалуйста, убедитесь, что вы добавляете имена своих пользовательских хуков к use, что на самом деле помогает выяснить уклонение Различие между пользовательским хуком или функцией.

Кроме того, поскольку вы делаете вызов API на основе идентификатора параметра, я советую вам передавать этот идентификатор как зависимость для useEffect в настраиваемом хуке, чтобы сценарий ios, где изменяется идентификатор, также работал без проблем

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;