Reactjs React钩子从对象状态内部获取数据

我正在使用react钩子访问状态信息。在我的代码中，我将状态从一个页面传递到另一个页面，并且能够成功地访问它。这是我目前的工作代码：

    import React, { useEffect, useState } from 'react';

    import { showById, changeStatus } from '../../services/teachers';

    import './styles.css';

    function TeacherPage(props) {
        const [data, setData] = useState(props.location.state);
        const [teacherInfo, setTeacherInfo] = useState(data);
        const [nameInfo, setNameInfo] = useState();

        function handleTeacherInfo(id){
            id = data.teacher._id;
            const response = api.get(`/teacher/${id}`);
            setTeacherInfo(response);
            console.log(teacherInfo);
            setNameInfo(teacherInfo.name)
            console.log(nameInfo);
        }

        useEffect(() =>{
            handleTeacherInfo();
        }, [data])

        return (
        <div className="teacherPage">
            <div className="contentTeacherPage">
                <h1>Professor(a) {data.teacher.name}</h1>
                <div clasname="teacherInfoCard" key={data.teacher._id}>
                    <span>{data.teacher.name}</span>
                    <br></br>
                    <span>{data.teacher._id}</span>
                    <br></br>
                    <span>{data.teacher.email}</span>
                    <br></br>
                    <span>{data.teacher.education}</span>
                    <br></br>
                    <span>Status: {data.teacher.approved}</span>
                    <br></br>
                    <span>{data.teacher.cpf}</span>
                    <br></br>
                    <span>{data.teacher.info}</span>
                    <br></br>
                    <span>{data.teacher.rating}</span>
                    <br></br>
                    <span>{data.teacher.subjects[0]} e {data.teacher.subjects[1]}</span>
                    <br></br>
                    <span>{data.teacher.education[0]}</span>
                    <br></br>
                    {/* {data.teacher && data.teacher.teacher.map((teacher) => {
                        return (
                            <span>alalal</span>
                        )
                    })} */}
                    <button onClick={approveTeacher}>Aprovar</button>
                </div>
            </div>
        </div>
    )
}

export default TeacherPage;

我如何从州政府获取具体数据？我相信要么我遗漏了什么，要么我宣布了一些错误，但我不知道是什么

为了更好地可视化，console.log（teacherInfo）返回如下内容：

teacher:
    approved: false
    availableDays: "asasas"
    classPrice: "R$ 500,00"
    degree: "ddsdsds"
    email: "pedro@gmail.com"
    info: "asasas"
    name: "Pedro"
    rating: 10
    registerDate: "2021-01-21T17:19:07.565Z"
    subjects: ["6001e73106a211004877f6e2"]
    __t: "Teacher"
    __v: 0
    _id: "6009b78b3c4c35001d19a346"

---

Console.log（teacherInfo.name）返回

undefined

，但应该返回

Pedro

setState

是异步的，因此您不能保证在尝试调用

setNameInfo（）

时

teacherInfo

会被更新

您应该为此使用钩子，并使用以下命令作为依赖项传入

teacherInfo

：

useffect（（）=>{
setNameInfo（teacherInfo？.name）；
}，[teacherInfo]）；

如何从州政府获取特定数据？与在JS中访问对象的方式相同，使用dot notation.ok，但例如。能够将

teacherInfo

作为对象返回，我知道返回

teacherInfo.name

将返回它的名称。但这是返回未定义的，所以我相信要么我遗漏了什么，要么我声明了一些错误，但不知道是什么。我把问题编辑得更具体了。请看下面我的答案。明白了。我会努力的，谢谢

teacher:
    approved: false
    availableDays: "asasas"
    classPrice: "R$ 500,00"
    degree: "ddsdsds"
    email: "pedro@gmail.com"
    info: "asasas"
    name: "Pedro"
    rating: 10
    registerDate: "2021-01-21T17:19:07.565Z"
    subjects: ["6001e73106a211004877f6e2"]
    __t: "Teacher"
    __v: 0
    _id: "6009b78b3c4c35001d19a346"