Axios 返回空字符串值

Question

//I fetched the data here using context Api

 const [allProfiles, setAllProfiles] = useState("");
  const fetchAllProfiles = async () => {
    const res = await axios.get("http://localhost:5000/api/all-profiles");
    setAllProfiles(res.data);
  };
  
  //I receive the data here in the frontend.
  
  import Image from "next/image";
import React, { useContext, useEffect } from "react";
import Layout from "@/components/Layout";
import MyContext from "@/store/MyContext";

function Sellers() {
  const { allProfiles, fetchAllProfiles } = useContext(MyContext);

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

  return (
    <Layout>
      <div className="container flex justify-center  mx-auto pt-16">
        <div>
          <p className="text-gray-500 text-lg text-center font-normal pb-3">
            SELLERS
          </p>

          <h1 className="thesellermaintext">
            View Buyers Profile Here, You Might Be Lucky To Find Your Dream Car
            Too.
          </h1>
        </div>
      </div>
      {allProfiles.map((profiles, i) => (
        <div className="w-full bg-gray-100 px-10 pt-10">
          <div className="container mx-auto">
            <div className="thesellerbg">
              <div className="sellersimagebg">
                <div className="rounded overflow-hidden shadow-md bg-white">
                  <div className="absolute -mt-20 w-full flex justify-center">
                    <div className="h-32 w-32">
                      <Image
                        width={400}
                        height={400}
                        src="/assets/images/d17.jpg"
                        alt="profile"
                        className="sellersimage"
                      />
                    </div>
                  </div>
                  <div className="px-6 mb-8 mt-16">
                    <div className="font-bold text-3xl text-center pb-1">
                      {allProfiles.name}
                    </div>
                    <p className="text-gray-800 text-sm text-center">
                      {profiles.businessStatus}
                    </p>
                    <p className="text-center text-gray-600 text-base pt-3 font-normal">
                      {profiles.description}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </Layout>
  );
}

export default Sellers;

我在这里面临的问题是，每当我点击按钮（通向这条路线的按钮）获取数据时，数据都会成功获取，但每当我输入 link直接在浏览器中解决我自己，当我 console.log 数据时它一直返回空字符串（像这样 <empty string>），并不断抛出错误说“allCars.map 不是一个函数。

Answer 1

您尝试用这样的空数组初始化“allProfiles”：

 const [allProfiles, setAllProfiles] = useState([]);

空字符串似乎与来自 api 响应

的数组不同

Answer 2

当页面加载时 allProfiles 为空，因此无法映射。您应该先检查 allProfiles 是否存在，然后再映射。

{allProfiles ? allProfiles.map((profiles, i) => (
    <div>{profiles.name}</div>
)) : <div>Loading...</div>}

Axios 返回空字符串值

Axios is returning empty string value

javascript

node.js

reactjs

axios

next.js