Axios is returning empty string value

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;

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.

You can't use useState() outside of your component. This should be throwing errors at you. — Phil
– Phil, Commented Feb 17, 2022 at 6:48
If allProfiles is an array, why are you initialising it as an empty string? — Phil
– Phil, Commented Feb 17, 2022 at 6:50

buithienquyet · Accepted Answer · 2022-02-17 06:55:32Z

3

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

edited Feb 17, 2022 at 6:55

answered Feb 17, 2022 at 6:44

buithienquyet

3651 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hatam Jafarov · Accepted Answer · 2022-02-17 06:56:48Z

-1

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>}

answered Feb 17, 2022 at 6:56

Hatam Jafarov

654 bronze badges

Collectives™ on Stack Overflow

Axios is returning empty string value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related