Reactjs react和typescript中的useState（）工作不正常。。！再一次

又是我，useState（）丢失数据，下面的例子是。我尝试使用“类型”和“接口”加载数据，但不工作，我不明白为什么不工作，如果我将数据有效地放入数组中，请帮助

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

从“React”导入React
从“react styled flexboxgrid”导入{Row，Col}
从“/styles”导入{Table，Th，Td，Done，Err}
从“../../../../userCampaings”导入{CampaingHeader，CampaingBody}
类型campTypeBody={
cinit:字符串，
标题：字符串，
标题：数字，
描述；字符串
}
const FormPreview:React.FC=（）=>{
let token=window.sessionStorage.getItem（'token'）
让CamHeader=新CampaingHeader（令牌）
let CamBody=新CampaingBody（令牌）
const[datach，setDatach]=React.useState（0）
const[cpb，setCpb]=React.useState（）
常量getLast=（）=>{
CamHeader.getLastCampaingHeader（）//
。然后（resp=>{
//console.info（resp.data.data.id）//
setDatach（resp.data.data.id）//
}).catch（错误=>{
控制台错误（err）
})
}
常量retrieveCampBody=（）=>{
//A）工作时，我可以从API获取数据
//B）无法设置数据，也不准确
//我是说，我试着用“类型”和“接口”
//不起作用
CamBody.getRetrieveBody（datach）
。然后（resp=>{
console.info（resp.data.data）//A
setCpb（resp.data.data）//B
})
.catch（错误=>{
控制台信息（错误）
})
}
React.useffect（（）=>{
getLast（）
如果（数据！==0）{
retrieveCampBody（）
}
console.info（cpb）//未定义
//}，[datach，cpb]）//我尝试将“cpb”加载数据放在这里
//在返回NOT WOKRING“对象可能是‘未定义’”中
}，[datach]）
返回(
//cpb对象可能“未定义”
{cpb.cinit}
)
}
导出默认表单预览

请告诉我为什么不工作，我不明白为什么不工作

---

最好的词语。cpb在第一次渲染期间未定义，查询结束后将填充。在访问

cpb.cinit

之前，您需要添加一个空检查。在这个示例中，我添加了一个加载状态，因为加载数据时这是一个很好的实践

重要的是要注意，

useffect

挂钩允许您在更新DOM后运行函数，在填充数据之前将有第一次渲染

试试这个：

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

import React，{useState}来自“React”
从“react styled flexboxgrid”导入{Row，Col}
从“/styles”导入{Table，Th，Td，Done，Err}
从“../../../../userCampaings”导入{CampaingHeader，CampaingBody}
接口campTypeBody={
cinit:字符串，
标题：字符串，
标题：数字，
描述；字符串
}
const FormPreview:React.FC=（）=>{
let token=window.sessionStorage.getItem（'token'）
让CamHeader=新CampaingHeader（令牌）
let CamBody=新CampaingBody（令牌）
常量[isLoading，setIsLoading]=useState（真）
const[datach，setDatach]=useState（0）
const[cpb，setCpb]=useState（）
常量getLast=（）=>{
CamHeader.getLastCampaingHeader（）//
。然后（resp=>{
//console.info（resp.data.data.id）//
setDatach（resp.data.data.id）//
}).catch（错误=>{
控制台错误（err）
})
}
常量retrieveCampBody=（）=>{
CamBody.getRetrieveBody（datach）
。然后（resp=>{
console.info（resp.data.data）//A
setCpb（resp.data.data）//B
})
.catch（错误=>{
控制台信息（错误）
})
.然后（（）=>{
//即使有错误，也会将加载设置为false
//不是所有浏览器都支持的finally的替代方案
// https://caniuse.com/?search=finally
设置加载（假）；
})
}
React.useffect（（）=>{
getLast（）
如果（数据！==0）{
retrieveCampBody（）
}
console.info（cpb）//UNDEFINED
cpb
未定义，您没有为初始渲染提供初始状态值。