javascript - 不断收到 TypeError : guide. map is not a function

Question

我似乎无法弄清楚为什么它不能正常工作。我已经检查了几个小时，我认为我已经正确设置了它，但它一直给我错误。我不确定我的状态设置是否不正确。当我 console.log 时，它从 api 获取示例数据并将其显示在控制台中。

import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import axios from 'axios'
import GuideData from './Guides/GuideData.js'
import GuideLoader from './Guides/GuideLoader.js'

const GuideRender= styled.div`
display:flex;
flex-direction:column;
justify-content:space-between;
border: 5px black;
`

const HomePage = () => {

    const[guide, setGuide]=useState([]);
    const apiLink ='https://how-to-guide-unit4-build.herokuapp.com/api/guides/'


    useEffect(() => {
        axios
        .get(apiLink)
        .then(response => setGuide(response))
        .catch(err =>
            console.log(err));
    }, []);
    console.log(guide)

    if (!guide) return <GuideLoader />;


    return (
        <div>
        <GuideRender>
            {guide.map(item => (
                <GuideData key={item} item={item} />
            ))} 
        </GuideRender>
        <div>
            <button>Create Article</button>
        </div>
        </div>
    )
}


export default HomePage

Answer 1

现在，稍微清理一下 useEffect 函数。错误在于您仅设置了 response，而不是 response.data。

  const HomePage = () => {
  const [guide, setGuide] = useState([]);
  const [loading, setLoading] = useState(true);

  const apiLink = "https://how-to-guide-unit4-build.herokuapp.com/api/guides/";

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get(apiLink);
      setGuide(response.data);
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

  if (loading) {
    return "Loading...";
  }

  console.log(guide);
  return (
    <div>
      <GuideRender>
        {guide.map(item => (
          <GuideData key={item} item={item} />
        ))}
      </GuideRender>
      <div>
        <button>Create Article</button>
      </div>
    </div>
  );
};