Почему возникает ошибка с map в реакте?

Question

[Kipsi]

Добрый день. Подскажите пожалуйста почему в коде при попытке пройтись map возникает ошибка в блоке с map именно.
'Cannot read properties of undefined (reading 'map')'
В чем я ошиблась?

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [load, setLoading] = useState(true);
  const [data, setData] = useState();
  useEffect(() => {
    const fetchData = async() => {
      const res = await fetch('https://jsonplaceholder.typicode.com/comments');
      const data = await res.json()
      setData(data)
    }
    fetchData()
  }, [load])

  console.log(data)

  return (
    <div className="App">
      <h1>Hello Code</h1>
      {data.map((item, idx) => (
        <div key={idx}>
          <h2>{item.name}</h2>
        </div>
      ))}
    </div>
  );
}

Comments

[WbICHA]

Потому что дата = андефайнд, не?

Answer 1

[Aetae]

const [data, setData] = useState([]);

Сейчас по порядку у тебя так:
1.

const [data, setData] = useState(); // data === undefined

2. data.map((item, idx) => ( // error
3. fetchData
4. Цифры текут по проводам...
5. setData // data === json с сервера
6. data.map((item, idx) => ( // ok