Почему не отображаются данные на странице, а вылазит ошибка?

Question

[BranchInCode]

Данный код работает исправно:

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

const Container = () => {
  const [posts, setPosts] = useState([]);
  const fetchURL = "https://jsonplaceholder.typicode.com";

  const getData = async () => {
    const res = await fetch(`${fetchURL}/posts`);
    const fetchReq = await res.json();
    console.log(fetchReq);
    setPosts(fetchReq);
  }

  useEffect(() => {
    getData();
  }, [])

  return (
    <div>
      {posts.map((post) => (
          <div className='post' key={post.id}>
            <h3>{post.id}. {post.title}</h3>
          </div>
        ))
      }
    </div>
  )
}
export default Container;

Но мне надо вывести именно через .then, однако код выводит ошибку:

Как исправить эту ошибку в коде ниже???

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

const Container = () => {
  const [posts, setPosts] = useState([]);
  const fetchURL = "https://jsonplaceholder.typicode.com";

  const getData = async () => {
      const fetchReq = fetch(`${fetchURL}/posts`).then(res => res.json());
      console.log(fetchReq);
      fetchReq.then((res) => console.log(res));
      setPosts(fetchReq);
  }

  useEffect(() => {
    getData();
  }, [])

  return (
    <div>
      {posts.map((post) => (
          <div className='post' key={post.id}>
            <h3>{post.id}. {post.title}</h3>
          </div>
        ))
      }
    </div>
  )
}
export default Container;

Answer 1

[0xD34F]

Что, "posts.map is not a function"? Давайте взглянем, что такое posts:

const [posts, setPosts] = useState([]);

Изначально это массив. У массивов map есть. А раз воспользоваться map'ом всё-таки не удаётся, значит, где-то вместо массива в качестве значения posts устанавливается какой-то мусор. Смотрим, где вызывается setPosts:

setPosts(fetchReq);

Окей, а что такое fetchReq? Давайте узнаем:

const fetchReq = fetch(`${fetchURL}/posts`).then(res => res.json());

Надо же, это промис. Зачем вы промис кладёте туда, где нужен массив? У промисов метода map нет. Надо дождаться выполнения этого промиса и передавать в setPosts результат. Исправляем:

fetch(`${fetchURL}/posts`)
  .then(r => r.json())
  .then(setPosts);

Answer 2

[McBernar]

К моменту рендера списка у вас еще не получен массив.

Делайте сначала проверку на заполненный массив, и только после пробегайтесь по нему map-ом.
posts && …