CODEWITHSUNDEEP
javascriptnode.jsreactjsredux
KingJoeffrey
KingJoeffrey

Reputation: 391

How to setState with fetched data in React

I need to setState with an object that I'm getting from a redux store. The problem is when I call setState in my component I am getting undefined. Any idea on how to set a default value of state with fetched data?

Here is my component:

import React, { useEffect, Fragment, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const contactDetails = useSelector((state) => state.contactDetails)

const upFields = contactDetails?.contact?.data?.fields


const [contact, setContact] = useState({
    fields:  upFields <---- this is returning undefined.. The name is correct, but maybe setState is running too fast? 
  })
  

console.log(contact) <---- this shows {fields: undefined}



console.log(upFields) <---- this console.logs just fine

Upvotes: 1

Views: 647

Answers (2)

M-Raw
M-Raw

Reputation: 839

you use useEffect() and trigger it using the object

useEffect(()=>{
  setContact(fetched_data)
}, [fetched_data]) // <-- data array will trigger every time this data change

you can trigger it on first component mount with

useEffect(()=>{
  setContact(fetched_data)
}, []) // <-- empty array will only trigger once

Upvotes: 1

KingJoeffrey
KingJoeffrey

Reputation: 391

So, I ended up setting my state one component higher, and passing the "upFields" to the child component that needed this state. Once in the child component I just ran a useEffect and setState with the data I needed

Upvotes: 0

Related Questions