Question

#toppings {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
   width: -10px;
}

#toppings td, #toppings th {
  border: 1px solid #ddd;
  padding: 0px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#toppings th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #000000;
  color: white;
}

#imgdiv
{
   float:left;
}
#datadiv
{
   float:right
}
#container
{
   display: inline-block
}

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

如何先获取数据，然后再向下传递？

Answer 1

您必须将 projectData 值初始化为空对象或在 projectData 未定义时呈现 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
    
    );

Answer 2

对于组件的最初安装，projectData 是 undefined，这就是您收到错误的原因。

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

    return (
    
    <div>
    {projectData ? 
     <h1>projectData.title</h1> : 'loading'}
    ... other code
);

如果您不想以这种方式工作，请始终将状态的初始值设置为遵循您即将到来的数据结构的内容，例如您的状态的初始值可能类似于：

{title: ''}

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

Answer 3

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

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

根据您期望数据的外观，您可能还需要添加检查项目数据.title 是否存在并且其中包含您期望的值。

Axios 先得到响应，然后再渲染表单 TypeError: Cannot read property '***' of undefined

3 个答案: