如何使用 useEffect 正确设置 API 调用？

Question

这是我的整个组件。 在控制台中，正确的数据显示在“数据”中，但是当我尝试在其上运行 map 时，它显示“地图不是 function”。 控制台中的 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(() => {
        const fetchBeaches = async () => {
            const result = await axios('http://localhost:3000/beaches');
            setData(result.data);}
            fetchBeaches();
        }, [])
            
    console.log(data)


return (

    <ul>
        {data.beaches.map(beach => (
            <button>{beach.name}</button>
        ))}
    </ul>
)
}

Answer 1

因为您没有正确设置 state 中的海滩数据。

用这个替换useEffect代码：

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

此外，您可以改进海滩数据的 state 结构：

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

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

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


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