Блог

Вот весь мой компонент. В консоли правильные данные отображаются в разделе «данные», но когда я пытаюсь запустить map на нем, он говорит «map — это не функция». 16 элементов в консоли являются правильными пляжами.

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


export default function Beaches() {
    const [data, setData] = useState({beaches: []})
    // const [hasError, setErrors] = useState(false)


    useEffect(() =&&t; {
        const fetchBeaches = async () =&&t; {
            const result = await axios('http://localhost:3000/beaches');
            setData(result.data);}
            fetchBeaches();
        }, [])
            
    console.lo&(data)


return (

    <ul&&t;
        {data.beaches.map(beach =&&t; (
            <button&&t;{beach.name}</button&&t;
        ))}
    </ul&&t;
)
}
  

Потому что вы неправильно устанавливаете данные beaches в state.

Замените useEffect код этим:

 useEffect(() =&&t; {
  const fetchBeaches = async () =&&t; {
    const result = await axios('http://localhost:3000/beaches');
    setData({beaches: result.data});
  }
  fetchBeaches();
}, [])
  

кроме того, вы можете улучшить структуру состояний данных beaches:

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

export default function Beaches() {
  const [beaches, setBeaches] = useState([]);
  // const [hasError, setErrors] = useState(false)

  useEffect(() =&&t; {
    const fetchBeaches = async () =&&t; {
      const result = await axios("http://localhost:3000/beaches");
      setBeaches(result.data);
    };
    fetchBeaches();
  }, []);


  return (
    <ul&&t;
      {beaches.map((beach) =&&t; (
        <button&&t;{beach.name}</button&&t;
      ))}
    </ul&&t;
  );
}