React - Fetch from external API function on button click

user_5074921 0
Viewed 40807

I'm trying to start an API call from a component when a user clicks a button. One URL param depends on the word a user selected before clicking the button. The fetch function is in an external function. When I call the function on button click and console log the result, it shows undefined, probably because of the async nature of the function.

How can I solve this if I want to put the fetch response into the App component state?

import { fetchAPI } from '../fetchAPI';

export default class App extends Component {

constructor() {
    super();
    this.toggleButtonState = this.toggleButtonState.bind(this);
    state = { ... }
}

toggleButtonState() {
    let selectedWord = window.getSelection().toString();
    fetchAPI(selectedWord);
    // call the fetchAPI function and put the result into state
}

export function fetchAPI(param) {
    // param is a highlighted word from the user before it clicked the button
    fetch('https://api.com/?param=' + param)
    .then(function(result) {
        return result;
    });
 }
reactjs fetch asynchronous javascript
3 Answers

You have to return the fetch request from your fetchAPI function, and you also want to add an additional then and give it a function in which you put the result in the state in the toggleButtonState function.

In your example the then inside the fetchAPI function is redundant, since it just returns the value as is. You can remove that and still get the same result.

Example

function fetch() {
  return new Promise(resolve => setTimeout(() => resolve(42), 1000));
}

function fetchAPI(param) {
  // param is a highlighted word from the user before it clicked the button
  return fetch("https://api.com/?param=" + param);
}

class App extends React.Component {
  state = { result: null };

  toggleButtonState = () => {
    let selectedWord = window.getSelection().toString();
    fetchAPI(selectedWord).then(result => {
      this.setState({ result });
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.toggleButtonState}> Click me </button>
        <div>{this.state.result}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

user_36178860 
toggleButtonState() {
  let selectedWord = window.getSelection().toString();
  fetchAPI(selectedWord).then(result => this.setState({result});
}

export function fetchAPI(param) {

  // param is a highlighted word from the user before it clicked the button
  return fetch('https://api.com/?param=' + param)
}

This will solve your problem. If you don't want to change the fetch API like that just add 'return' before calling fetch as shown below.

toggleButtonState() {
  let selectedWord = window.getSelection().toString();
  fetchAPI(selectedWord).then(result => this.setState({result});
}

export function fetchAPI(param) {
  return fetch('https://api.com/?param=' + param)
    .then(function(result){
      return result;
    });
}
user_32090820

One solution is to provide a callback to your fetchAPI() function:

function fetchAPI(param, callback) {
  // param is a highlighted word from the user before it clicked the button
  return fetch("https://api.com/?param=" + param)
    .then(callback);
}

You can call the modified function like this:

fetchAPI(selectedWord, result =>
  this.setState({ result });
);

Note that this follows the same general principle as the other answers. You need to call setState() with the correct this reference. You can only do so from a function inside your component class.

user_14405650
Related