React issue with setting state after fetching data

react data fetching
react hoc fetch data
react context fetch data
react fetch data before render
set state after fetch
react suspense data fetching
get data from state react
react periodically fetch

I'm creating a form which I'd like to load with data on initial load.

I've setup did Mount to call my function fetchClaims. I receive back the result and I'm able to console log it. What I can't do is update my state with it so that I can then use it in my form.

componentDidMount() {
  this.onInit(this.props);
}

onInit = props =>
  props
    .fetchClaims()
    .then(results => console.log('results = ' + JSON.stringify(results)))
    .then(claims => this.setState({ results }))
    .then(results =>
      console.log('results state = ' + JSON.stringify(this.state)),
    );

The resulting data looks like

results = {
  type: 'CLAIMS_FETCHED',
  claims: [
    {
      _id: '5b0d5b7f035a00f06003e6b8',
      claimID: '123456',
      claimDate: '2018-05-14T00:00:00.000Z',
      carrier: 'BCBS NJ',
    },
  ],
};

and the state looks like

state = {
  data: { email: '' },
  loading: false,
  errors: {},
  fromdate: '',
  todate: '',
  claims: {},
  results: {},
};

I'd like to populate the Claims array into the claims in state and then map over it.

Try returning the value after the first console log and fix the parameter name when setting the state.

onInit = props => props.fetchClaims()
    .then(results => {
        console.log("results = " + JSON.stringify(results));
        return results;
    })
    .then(results => this.setState({ claims: results.claims }))
    .then(() => console.log("results state = " + JSON.stringify(this.state)));

javascript - React issue with setting state after fetching data, I'm creating a form which I'd like to load with data on initial load. I've setup did Mount to call my function fetchClaims. I receive back the result and I'm able to  I have an application which needs to fetch invoice data from Stripe API (payment processor). React - Render HTML When Setting a State After Fetching Data

I rewrote your code, try this:

onInit = props => props.fetchClaims()
 .then(results =>  {
  console.log("results = " + JSON.stringify(results))
  this.setState( { results }, () => console.log("results state = " + JSON.stringify(this.state) ))
 })

Fetching Data and Updating State in a React Class, Fetching Data and Updating State in a React Class fetched from a server and hopefully clear up any confusion on the topic. When the component loads, I need it to create a request to my REST API to pull in some data. to request data from the server since even though setting the state will cause a  The effect hook runs when the component mounts but also when the component updates. Because we are setting the state after every data fetch, the component updates and the effect runs again. It fetches the data again and again. That's a bug and needs to be avoided. We only want to fetch data when the component mounts.

try this u may get

onInit = props => props.fetchClaims()
           .then(
             res =>res.json() )
           .then(results => this.setState({results }, () 
 => console.log('results ', results )))

Accessing React State right after setting it, Cover image for Accessing React State right after setting it How do we access the state value right after setting it then? Reproducing the Problem and re-​render component whenever i receive new data from websocket. const fetchName = async () => { const remoteName = await (await fetch(". Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side-effects. useEffect is a React Hook that accepts a callback as it’s the first

Problems fetching data from an API - JavaScript, Hello! I'm trying to fetch an data from an API here is my code. import React, setState({ isLoaded: true, items: json, }) }); } render() { var { isLoaded, items } But when I do i get the “Wait…data is fetching” h3 element, but the data doesn't fetch. This is not trivial. There are several places in the React component hierarchy where you can fetch data. When to fetch data is another concern. You also need to consider what technology to use for fetching your data and where to store it. At the end of this tutorial, you'll have a clear picture of how data fetching works in React, the pros and

React JS, If I'm not mistaken the issue you are having is this : the this anonymous function inside the then() that contains this.setState() is not the React  In particular, we can use React Hooks for data fetching. Let’s examine the code of the UserTableReactHooks functional component. First, the useState () state Hook is called with an initial state. This is similar to the constructor. The Hook returns two values: the current state and a function to update it.

useEffect memory leak when setting state in fetch promise · Issue , useEffect memory leak when setting state in fetch promise #15006 index.js:​1446 Warning: Can't perform a React state update on an unmounted setState({​user: data})) } render() { const { user, spotifyAPI } = this.state const  When we set a new state for posts using the data obtained from the API, we had to set a new state for isLoading, too. Then we can finally let the user know data is loading or render the data we’ve received.

Comments
  • thank you, that worked. Now that I have this in my state, I believe I can "map" it. Is that Correct?
  • @Reacting that's correct, you can map it in your render function.