为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

HUX布斯 2022-07-21 21:26:33
我似乎无法弄清楚为什么这不能正常工作。我已经查看了几个小时,我认为我已经正确设置了它,但它一直给我错误。我不确定我的状态设置是否错误。当我 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
查看完整描述

2 回答

?
jeck猫

TA贡献1909条经验 获得超7个赞

给你,清理一下你的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>

  );

};



查看完整回答
反对 回复 2022-07-21
?
慕少森

TA贡献2019条经验 获得超9个赞

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


查看完整回答
反对 回复 2022-07-21
  • 2 回答
  • 0 关注
  • 108 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信