不断收到 TypeError：guide.map 不是函数

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>

  );

};

Answer 2

你的代码看起来不错。您可以使用可选链接来避免组件在 API 集成时中断。工作沙箱