Error while passing params in axios with React

Question

I'm trying a GET request with Axios by passing certain params as follows,

const fetchData = async () => {
    const response = await axios
      .get(config.App_URL.getAllMock, {
        params: {
          customHostName: customerData,
          type: "mock",
        },
      })
      .catch((error) => {
        console.error(`Error in fetching the data ${error}`);
      });
    let list = [response.data.routeManager];
    setData(list);
    setLoading(true);
  };

customerData is fetched from another object passed via contextAPI to this component.

 const [options, setOptions] = useContext(CustomerContext);

And then it is mapped as follows,

const hostNames = [];
  options.map((name, index) => {
    hostNames.push(name.customer.customHostName);
  });
  const customerData = hostNames[0];

The request is failed with 404 since the customerData is not getting passed as a parameter into the payload. So when i checked the log url is like this,

htts://abc.com/v1/route/getAllRoutes?type=mock 404

I tried to log the value of customerData then in that case I can see the expected value to be passed. Any idea on how to pass the customHostName as param into the payload?

Updated the questions with component I'm referring to,


const MainContent = () => {
  const [options, setOptions] = useContext(CustomerContext);

  const hostNames = [];
  options.map((name, index) => {
    hostNames.push(name.customer.customHostName);
  });
  const customerData = hostNames[0];

  // Get all the mock
  const fetchData = async () => {
    const response = await axios
      .get(config.App_URL.getAllMock, {
        params: {
          customHostName: customerData,
          type: "mock",
        },
      })
      .catch((error) => {
        console.error(`Error in fetching the data ${error}`);
      });
    ....
    ....
    ....
  };

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

  return (
    <div>
     ....
     ....
     ....
    </div>
  );
};

export default MainContent;

404 is not found error. means there should something wrong with your url — Touseef Ahmad
– Touseef Ahmad, Commented Sep 7, 2020 at 11:10
@ShubhamVerma: I'm getting customerData from a get request. I tried logging the customerData and I'm seeing the expected value. And I'm passing the value as props and in both cases, I'm seeing output when tried console log. — Akhil Suseelan
– Akhil Suseelan, Commented Sep 7, 2020 at 11:27
@TouseefAhmad: Yeah problem is with the URL because only type is getting passed into the URL. I'm getting the URL while logging in console. — Akhil Suseelan
– Akhil Suseelan, Commented Sep 7, 2020 at 11:29

ismailkurar · Accepted Answer · 2020-09-11 11:09:00Z

2

+50

You are using a options variable get from the context and If this variable is get from the async function, you need to listen changes on this variable by adding this variable into the useEffect dependency array.

Your version did not work because you were calling fetchData function only one time (after the initial render).

  const fetchData = (customerData) => {
    ...
  }  

   useEffect(() => {
      if(options) {
       const hostNames = [];
       options.map((name, index) => {
       hostNames.push(name.customer.customHostName);
       });
        const customerData = hostNames[0];

        fetchData(customerData);
      } 
     }, [options]);

edited Sep 11, 2020 at 11:09

answered Sep 11, 2020 at 10:43

ismailkurar

1913 bronze badges

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

2 Comments

ismailkurar Over a year ago

Last edited version should work if the options really comes as you expected

Akhil Suseelan Over a year ago

yes, Thats working for me. Can you update the answer showing a brief explanation, please?

Collectives™ on Stack Overflow

Error while passing params in axios with React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related