useState() in react and typescript not working well..! again

Question

it's me again, the useState() lose data, the example bellow. I try load data, using "type" and "inteface" but not working, and I can't understand why not working, if I put the data in useEffect in the array, please help

import React from 'react'
import { Row, Col } from 'react-styled-flexboxgrid'
import { Table, Th, Td, Done, Err } from './styles'
import { CampaingHeader, CampaingBody } from '../../../../../userCampaings'

type campTypeBody = {
    cinit: string,
    title: string,
    header: number,
    description; string
}
const FormPreview: React.FC = () => {
    let token = window.sessionStorage.getItem('token')
    let CamHeader = new CampaingHeader(token)
    let CamBody = new CampaingBody(token)
    const [datach, setDatach] = React.useState(0)
    const [cpb, setCpb] = React.useState<campTypeBody>()

    const getLast = () => {
        CamHeader.getLastCampaingHeader() // 
            .then(resp => {
                //console.info(resp.data.data.id) //
                setDatach(resp.data.data.id) //
            }).catch(err => {
                console.error(err)
            })
    }

    const retrieveCampBody = () => {
        // A) WORKING I CAN GET DATA FROM MY API 
        // B) CAN'T SET DATA, WELL NOT EXACTLY
        // I MEAN, I TRY USING "TYPE" AND "INTERFACE"
        // NOT WORKING
        CamBody.getRetrieveCBody(datach)
            .then(resp => {
                console.info(resp.data.data) // A
                setCpb(resp.data.data) // B  
            })
            .catch(err => {
                console.info(err)
            })
    }

    React.useEffect(() => {
        getLast()
        if (data !== 0) {
            retrieveCampBody()
        }
        console.info(cpb) // UNDEFINED
        //},[datach, cpb]) // I TRY PUT HERE "cpb" LOAD DATA
        // IN THE RETURN NOT WOKRING  "THE OBJECT IS POSSIBLY 'UNDEFINED'"  
    }, [datach])

    return (
        <div>
            // cpb THE OBJECT IS POSSIBLY 'UNDEFINED'
            <span>{cpb.cinit}</span>
        </div>
    )
}

export default FormPreview

please tell me why not working, I can't understand why not wokring

best words folks.

Answer 1

cpb is undefined during the first render and will be populated once your query end. You need to add a null check before accessing cpb.cinit. In the example, I added a loading state as it's a good practice when loading data.

It's important to note that the useEffect hooks allow you to run a function after React has updated the DOM [link], there will be a first render before you populate your data.

Try this:

import React, { useState } from 'react'
import { Row, Col } from 'react-styled-flexboxgrid'
import { Table, Th, Td, Done, Err } from './styles'
import { CampaingHeader, CampaingBody } from '../../../../../userCampaings'

interface campTypeBody = {
    cinit: string,
    title: string,
    header: number,
    description; string
}

const FormPreview: React.FC = () => {
    let token = window.sessionStorage.getItem('token')
    let CamHeader = new CampaingHeader(token)
    let CamBody = new CampaingBody(token)
    const [isLoading, setIsLoading] = useState(true)
    const [datach, setDatach] = useState(0)
    const [cpb, setCpb] = useState<campTypeBody>()

    const getLast = () => {
        CamHeader.getLastCampaingHeader() // 
            .then(resp => {
                //console.info(resp.data.data.id) //
                setDatach(resp.data.data.id) //
            }).catch(err => {
                console.error(err)
            })
    }

    const retrieveCampBody = () => {
        CamBody.getRetrieveCBody(datach)
            .then(resp => {
                console.info(resp.data.data) // A
                setCpb(resp.data.data) // B
            })
            .catch(err => {
                console.info(err)
            })
            .then(() => {
                // Will set loading to false even if there is an error
                // Alternative to finally which is not supported by all browsers
                // https://caniuse.com/?search=finally
                setIsLoading(false);
            })
    }

    React.useEffect(() => {
        getLast()
        if (data !== 0) {
            retrieveCampBody()
        }
        console.info(cpb) // UNDEFINED <-- evidently
    }, [datach])

    return (
        <div>
            {loading ? "Loading": null}
             
            {!loading && cpb ? (
                <span>{cpb.cinit}</span>
            ): null}
        </div>
    )
}

export default FormPreview