how to reset an axios.post for multiple queries?

axios interceptors
axios headers
axios post headers
axios post form data
axios parallel requests
axios post json body
axios - npm
axios react

I have a button that triggers an axios.post to an API endpoint. The button works the first time it is used (the console.log(res.data.userdata[0].txHash) is successful).

If I change the state (this.state.hashOutput) and press the button again, an error that Uncaught (in promise) TypeError: Cannot read property 'txHash' of undefined occurs. There are no errors on the server.

code:

  handleOnClick() {
      const searchValue = this.state.hashOutput;
      axios.post("https://myapi.net/searchDB", {
          searchValue: searchValue
        })
        .then(res => {
          console.log(res.data);
        }).catch(err => console.log(err));
    }
  }

Any thoughts? I don't know where to begin researching this. Thanks!

Are you sure whether the response has an array of data or a single object? In any case, it is recommended that you check before accessing values like so.

  handleOnClick() {
      const searchValue = this.state.hashOutput;
      axios.post("https://myapi.net/searchDB", {
          searchValue: searchValue
        })
        .then(res => {
          console.log(res.data.userdata && res.data.userdata[0] && res.data.userdata[0].txHash);  // make sure the value is available before accessing the property 
        });
    }
  }

Each post is independent and you would not have to reset as mentioned in the post. Try logging res first.

Axios Cheat Sheet, Multiple concurrent requests Send a POST request axios({ method: 'post', url: '/​user/12345', data: { firstName: 'Fred', lastName: axios.post(url[, data[, config]]). url` is the server URL that will be used for the request url: '/user', // `method` is the request method to be used when making the request method: 'get', // default

txHash is a property of res.data.userdata[x] as depicted in your program and the error clearly says Cannot read property 'txHash' of undefined, ergo, res.data.userdata[x] is undefined, which means that the search result received from the server didn't contain any data which in turn means your search parameters doesn't match to any value in database, so it is a case of "search result(s) not found" and shouldn't cause any error on backend side which is the case. You should put a check on the frontend side and handle it appropriately.

Log the result like this and check out the result for yourself:

console.log("Data: ", res.data);

Axios JS & Node.js a match made in heaven for API consumption , Axios is a popular JavaScript HTTP client, in this post we will go through some of the most common use cases with Node. Able to handle multiple concurrent requests. Defines if the timeout should be reset between retrie. To send multiple requests, we use the Promise.all() method. $ node multiple_requests.js Jan Bodnar: 2016-01-31T12:12:28Z Symfony: 2009-10-24T04:05:23Z This is the output. Using Axios with JSON Server. JSON Server is a wonderful tool, which allows us to create fake REST APIs easily. $ npm i -g json-server We install json-server.

I am not sure but see if you had bind the handleOnClick function in constructor. Sometimes this might give undefined error.

this.handleOnClick=this.handleOnClick.bind(this);

Please check.

Thanks

How to send multiple requests using Axios, After that, we define that we want to perform a GET request using axios on the above URL. const requestOne = axios.get(one);. In requestOne we  Now, here Axios comes into the light. Axios is a library used to make HTTP requests from the browser via Node and Express.js platform. Axios is a well-known package, and it has got around 63,431 stars on GitHub and forked nearly 5273 times at the time of creating this tutorial.

Issue #108 · axios/axios, Right now, the axios only support add/remove Interceptors to the global axios in below request axios .post( 'login', body) .then(function(response) { self. Right now, I have to add another method to filter out some requests  Many ways to do this. To use this request. let config = { headers: { header1: value, } } let data = { 'HTTP_CONTENT_LANGUAGE': self.language } axios.post(URL, data

Search REST API | API Reference, The body of POST and PUT requests must be either a JSON object or a JSON array (depending Search index (GET). POST. /1/indexes/*/queries. Search multiple indices "https://${APPLICATION_ID}.algolia.net/1/keys/myAPIKey/​restore"  Definition and Usage. The <input type="reset"> defines a reset button which resets all form values to its initial values. Tip: Avoid reset buttons in your forms! It is frustrating for users if they click them by mistake.

React Native Axios - To Make HTTP API call in React Native, Calling a POST request using Axios; Multiple concurrent requests in a single call. I hope you will have a proper understanding of Axios after this. If you want to add​  Click Queries on the left pane. Click Create query in Design view on right pane. In the Show Table dialog box, select the main table. Click Add and then click Close. To select the fields, double-click the required fields. Do this for all the fields except for the AutoNumber field in the Table view of the main table. On the Query menu, click

Comments
  • When you change the state at that time what is the result from the API ?
  • Uncaught (in promise) TypeError: Cannot read property 'txHash' of undefined I've added the exact error to the OP for clarity. Thanks for looking at this :)
  • Can you showing, the state ?, don't look console.log(res.data.userdata[0].txHash);, but console.log(res) or catch error to looking the error response
  • The problem is on the server side, because there is no txHash in the response, so you have to check your backend. The error says that your response.data object does not contains "userdata" property
  • I did a plain console.log(res.data) and it is indeed sending an empty array on the second try. I will look at the server code. Thanks for your help :)
  • yes, you are right that the server is not returning a value on the second API call. Will open a separate question. Thanks for your help
  • Thanks, for some reason the server is returning data the first time, but not the second. I accepted the other answer because the posted first, but I do really appreciate you taking the time to help :)
  • You dont need to bind anything, because Vue.js resolves context by itself.
  • But I think he talking about reactjs.
  • This is react. Yes, handleOnClick is bound in that way. It works the first time, but returns an error if the state is changed and clicked a second time. Thanks for taking a look :)