保持输入错误：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集成时组件中断。工作sandbox