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

Question

这是我的全部组件。在控制台中，正确的数据显示在“数据”处，但是当我尝试在其上进行运行映射时，它显示“映射不是函数”。控制台中的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

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

将 useEffect 代码替换为：

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

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

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>
  );
}

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

How do I properly set up an API call using useEffect?

reactjs

axios

react-hooks

use-effect

react-functional-component