Получить данные из запроса Axios

Question

У меня есть api, который возвращает следующие данные

[{…}]
0: {id: 1, postId: 86, commentBody: "This is a test comment", giphyUrl: "https://media2.giphy.com/", 
postPicture: "pic.com", …}
length: 1
__proto__: Array(0)

[{"id":1,"postId":86,"commentBody":"This is a test comment","giphyUrl":"https://media2.giphy.com/","postPicture":"pic.com","userId":1,"userIdto":2,"userIdName":"Elton","userIdtoName":null}]

Я хочу получить доступ к телу комментария, но когда я делаю что-то вроде data.commentbody или data[0] .commentbody, я не получаю значениеназад он возвращает undefined. Пожалуйста, помогите, ниже мой axios request.

  const fetchComments = async (id) => {
  try {
    return await axios.get('http://10.6.254.22:5000/comments/' + id)
  } catch (error) {
    console.error(error)
  }
}

const comments = async(id) => {
  const fetchedComments = await fetchComments(id);
  console.log(fetchedComments.data)
  // console.log(fetchedComments.data.message)
  return fetchedComments.data
}

А потом я хочу отправить его как prop моему компоненту реакции

const reversedProps = this.props.posts.reverse();
const postItems = reversedProps.map(post => (
console.log('post id is===' + post.id),
comments(post.id),

   <PostBodyTemplate key={post.id} title={post.title} postBody={post.postBody} giphyUrl = 
  {post.giphyUrl} userWhoPosted={post.userIdName}/>

 ));

Answer 1

Вам необходимо отправить данные на ваш компонент следующим образом:

comments.map(comment => {
  return <PostBodyTemplate key={post.id} comment={comment} />;
});

Более полный пример:

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

function App() {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    const getComments = async () => {
      const response = await axios.get("http://10.6.254.22:5000/comments/1");
      setComments(response.data);
    };

    getComments();
  }, []);

  return (
    <div>
      {comments.map(comment => {
        console.log(comment.commentBody); // => you can access the commentBody like this
        return <PostBodyTemplate key={post.id} comment={comment} />;
      })}
    </div>
  );
}

export default App;