Question 358740 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Axios is not a function error, how to resolve?

i am trying to resolve this issue but failing. Please help me:

enter image description here

  • I have tried reinstalling using ‘npm install axios’, did not work.

  • changed the axios version to 1.1.2 (goes back to 1.6.7 somehow)

  • using : const axios = require("axios").default

    const sendFile = async () => {
if (image) {
  let formData = new FormData();
  formData.append("file", selectedFile);
  let res = await axios({    ## here I am getting the error
    method: "post",
    url: process.env.REACT_APP_API_URL,
    data: formData,
  });
  if (res.status === 200) {
    setData(res.data);
  }
  setIsloading(false);
}
}

enter image description here

Tags:

3

Answers


  1. 0

    Your import statement seems correct with ES6 syntax. This error occurs usually when axios is not initialized properly. Try clearing the node.js cache and running the application again.

    npm cache clean --force

    You can post your code snippet for more understanding.

    Login or Signup to reply.
  2. 0

    You can tr with

    let res = await axios.post({    ## here I am getting the error
    url: process.env.REACT_APP_API_URL,
    data: formData,
  });
    Login or Signup to reply.
  3. 0

    please read the documentation carefully. Minimal Example

    const axios = require("axios").default

// axios.<method> will now provide autocomplete and parameter typings

    post_example

    import axios from "axios";

const sendFile = async () => {
  if (image) {
    let formData = new FormData();
    formData.append("file", selectedFile);
    let res = await axios.post(process.env.REACT_APP_API_URL,formData)
    if (res.status === 200) {
      setData(res.data);
    }
    setIsloading(false);
  }
}

    post

    Here is the complete improved version of the code I provided.

    import axios from "axios";

// Function to send a file, assumed to be called within a React component or similar context
const sendFile = async () => {
  // Check if there is an image to send
  if (image) {
    setIsLoading(true); // Assuming setIsLoading updates loading state in the component

    // Create a FormData object to hold the file data
    let formData = new FormData();
    formData.append("file", selectedFile); // Assuming selectedFile is the file to be sent

    try {
      // Attempt to post the FormData to the specified API endpoint
      let res = await axios.post(process.env.REACT_APP_API_URL, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });

      // Check if the request was successful (status code 200)
      if (res.status === 200) {
        setData(res.data); // Assuming setData updates state with the response data
      }
      setIsLoading(false);
    } catch (error) {
      // Log any errors to the console and handle them as needed
      console.error("Failed to upload file:", error);
      // Here, you could update state to show an error message in the UI
      setIsLoading(false);
    }
    
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search