Почему нет данных, полученных через fetch (React)?

Question

[zerabora]

Помогите разобраться, вроде как делаю всё как написано в примере офф документации, но получаю ошибку: Cannot read properties of null (reading 'map'). Нужно сделать запрос на сервер, получить данные и вывести их в DOM.

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/todos/1')
          .then(res => res.json())
          .then(
            (data) => {
              setIsLoaded(true);
              setData(data);
            },
            (error) => {
              setIsLoaded(true);
              setError(error)
            }
          )
  },[]);

 if(error){
    return <div>Data loading error: {error.message}</div>
  } else if(!isLoaded){
    return <div>Loading...</div>
  } else{
    return (
        <div className="dashboard">
            {data.map(item => (
                <h1>{item.title}</h1>
            ))}
        </div>
    );
  }
}

Answer 1

[0xD34F]

Вопрос бессмысленный, данные есть.

fetch('https://jsonplaceholder.typicode.com/todos/1')

Указывая id, вы получаете один объект. Объект, а не массив. Уберите 1.

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

{data.map(item => (

Бывает ли у null метод map? - погуглите, разберитесь. Ну и замените null на [].