CODEWITHSUNDEEP
reactjspostreact-hooksfetch-api
Drew Bermudez
Drew Bermudez

Reputation: 51

API POST using fetch helper function doesn't render update after response is received

Beginner at React (and JS)...

I am trying to update text on the screen after my API helper function has completed a call. Instead, it returns empty. I have verified with the console that the data is being received. I followed the ComponentDidMount method from other similar questions but am still having no success. My code also seems to make multiple API calls, even though my intent is to only make one; I have to wonder if the issue stems from that.

Helper function:

export function apiHelper(url, data = {}, method = 'POST') {
    return fetch(url, {  // Return promise
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
        .then(res => res.json())
        .then((result) => {
            console.log(result);
            return result;
        }, (error) => {
            error = error;
        })
}

React Component that renders incorrectly after data is received:

class Headache extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      apiResponse: null,
    };
  }

  componentDidMount() {
        apiHelper(URLredacted,JSONredacted)
        .then(response => {
          this.setState({
            apiResponse: response
          });
          console.log("state set.",response)
        });
  }
  render() {
    const jsonResponse = JSON.stringify(this.props.apiResponse)
    return (
    <div>
      <img className="logoheader" src = {logo}/>
      <ColoredLine color="grey"/>
      <p>{jsonResponse}</p>
    </div>
    );
  }
}

Upvotes: 1

Views: 373

Answers (1)

Hazrat Gafulov
Hazrat Gafulov

Reputation: 348

   export function apiHelper(url, data = {}, method = 'POST') {
        return fetch(url, {  // Return promise
            method: method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(res => res.json())
            .catch(err=>console.log(err))
    }

    second page:

class Headache extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      apiResponse: null,
    };
  }

  componentDidMount() {
        apiHelper(URLredacted,JSONredacted)
        .then(response => {
          this.setState({
            apiResponse: response
          });
          console.log("state set.",response)
        });
  }
  render() {
    const jsonResponse = JSON.stringify(this.props.apiResponse)
    return (
    <div>
      <img className="logoheader" src = {logo}/>
      <ColoredLine color="grey"/>
      <p>{jsonResponse && ""}</p>
    </div>
    );
  }
}
 if these code dont work you will be need asyn function because you need to wait to fetch data.

Upvotes: 1

Related Questions