Axios is returning empty string value-CodePudding

//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;

The problem I'm facing here was, whenever I fetch the data with a button click (the button that leads to this route), the data will be fetch successfully, but whenever I input the link address directly myself in the browser, It keeps returning empty string when i console.log the data (Like this <empty string>), and keep throwing error saying "allCars.map is not a function.

CodePudding user response：

you try initialing "allProfiles" with empty array like this:

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

empty string seem tobe different from an Array come from api response

CodePudding user response：

When page loads allProfiles is empty thats way it can't be mapped. You should check first if allProfiles exists then map.

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

CodePudding user response：

  const fetchAllProfiles = async () => {
    const res = await axios.get("http://localhost:5000/api/all-profiles",{
        headers: {
          "Content-type": "application/json",
        },
      });
    setAllProfiles(res.data);
  };

Try Adding content type in header of fetch request