Блог

Я немного новичок в том, чтобы реагировать. Я пытаюсь сделать запрос GET от конечной точки REST API, который должен возвращать следующий JSON:

 {
    "author": "aqho",
    "title": "Second post!",
    "slug": "second-post",
    "body": "Let's see if things get updated in the database like the slug",
    "comments_list": [
        {
            "author": "aqho",
            "body": "it works!",
            "slug": "7213569934952552711-3"
        },
        {
            "author": "bobglu",
            "body": "how are you just so classically handsome",
            "slug": "2029512273124111200-4"
        }
    ]
}
 

Для запроса API я использую следующий код:

 const PostDetailPage = (props) => {
    const [post, setPost] = useState({});

    useEffect(() => {
        const slug = props.match.params.slug;
        const fetchData = async () => {
            try {
                const res = await API.get(`posts/${slug}`);
                setPost(res.data);
            }
            catch (err) {
                console.log(err)
            }
        };
        
        fetchData();
    }, []);
...
}
 

Я хочу создать функцию, которая возвращает список комментариев из JSON. Моя первая попытка заключалась в следующем:

 const renderComments = () => {
        return post.comments_list.map(item => (
          <li 
            key={item.slug}
          >
            {item.body}
          </li>
        ));
      };
 

Однако это приводит меня к ошибке TypeError: Cannot read property 'map' of undefined . Глядя в Интернете, кажется, что проблемы большинства людей можно решить, установив значение по умолчанию в пустой словарь, но я уже сделал это в своем крючке React. Я очень смущен тем, почему posts.comments_list не определен. Я также заметил, что попытка зарегистрировать заголовок сообщения с помощью console.log(post.title) undefined также дает мне. Я немного смущен, почему это так, потому что следующий код способен извлекать значения из post совершенно нормально:

 const PostDetailPage = (props) => {
...
    return (
            <div id='post-details-page'>
                <div id='post-details'>
                    <h1>{post.title}</h1>
                    <h4>Published on: {post.published_on}</h4>
                    <h4>Last edited: {post.last_edited}</h4>
                    <p> {post.body} </p>
                </div>
            </div>
        );
};

export default PostDetailPage;
 

 const renderComments = () => {
        return post.comments_list?.map(item => (
          <li 
            key={item.slug}
          >
            {item.body}
          </li>
        ));
      };
 

при первом рендеринге post = {}, post.comments_list не определен.

вам просто нужно добавить проверку post и post.comments_list объект, потому что изначально он пуст

 const renderComments = () => {
        return post amp;amp; post.comments_list amp;amp;post.comments_list.map(item => (
          <li 
            key={item.slug}
          >
            {item.body}
          </li>
        ));
      };