javascript - 不断收到 TypeError:guide.map 不是函数
问题描述
我似乎无法弄清楚为什么这不能正常工作。我已经查看了几个小时,我认为我已经正确设置了它,但它一直给我错误。我不确定我的状态设置是否错误。当我 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
解决方案
给你,清理一下你的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>
);
};