Reactjs Axios首先获取响应，然后呈现表单类型错误：无法读取属性'***'；未定义的 const[projectData，setprojectData]=useState（）； useffect（（）=>{ get（`/fetch project details/${id}`{ 标题：{ “x-access-token”：localStorage.getItem（`login`） } })。然后（（响应）=>{ 让结果=response.data.recordset； setprojectData（结果[0]）；//将数组存储在状态projectData中 }); },[]); 返回( {projectData.title} …其他代码 );

我收到**TypeError:无法读取未定义的属性“title”**

---

如何首先获取数据，然后将其向下传递？

您必须将项目数据值初始化为空对象，或者在未定义项目数据时呈现jsx

const [projectData, setprojectData] = useState();
useEffect(() => {
    Axios.get(`/fetch-project-details/${id}`, {
        headers: {
            "x-access-token": localStorage.getItem(`login`)
       }
    }).then((response) => {
        let result = response.data.recordset;
        setprojectData(result[0]); // store array in state projectData
    });
},[]);


return (
    <div>
    <h1>{projectData.title}</h1>
    ... other code

);

const[projectData，setprojectData]=useState（{}）；
useffect（（）=>{
get（`/fetch project details/${id}`{
标题：{
“x-access-token”：localStorage.getItem（`login`）
}
})。然后（（响应）=>{
让结果=response.data.recordset；
setprojectData（结果[0]）；//将数组存储在状态projectData中
});
},[]);
返回(
projectData.title
…其他代码
);

对于组件的初始装载，

projectData

是

未定义的

，这就是为什么会出现错误

您将检查它是否使用您正在获取的数据进行了更新

const [projectData, setprojectData] = useState({});
    useEffect(() => {
        Axios.get(`/fetch-project-details/${id}`, {
            headers: {
                "x-access-token": localStorage.getItem(`login`)
           }
        }).then((response) => {
            let result = response.data.recordset;
            setprojectData(result[0]); // store array in state projectData
        });
    },[]);
    
    
    return (
        <div>
        <h1>projectData.title</h1>
        ... other code
    
    );

---

但是在访问它之前检查状态总是安全的

在axios调用返回之前，projectData是用

未定义的

初始化的。因此，当React等待调用返回以便您可以设置projectData时，它会继续使用它所拥有的内容进行渲染。您需要有某种默认状态（加载图像或一些“请稍候”文本是常见的）。如果未定义projectData，则需要返回默认状态：

{title: ''}

if（！projectData）{
返回加载。请稍候…
；
}

---

根据您期望数据的外观，您可能还希望添加到该检查中，以确保projectData.title存在并具有您期望的值。

projectData

在初始渲染和所有后续渲染中未定义，直到由数据获取调用填充为止。您应该提供一个有效的对象来从中解构，或者使用空检查来执行一些条件呈现。

{title: ''}

if (!projectData) {
  return <p>Loading. Please Wait...</p>;
}