React-Axios => 无法读取未定义的属性（读取“长度”）

Posted 2023-03-17

【中文标题】React-Axios => 无法读取未定义的属性（读取“长度”）

【英文标题】：React-Axios => Cannot read properties of undefined (reading 'length')

【发布时间】：2021-11-29 11:57:07

【问题描述】：

我正在尝试从 API 检索一些数据。当我控制数据时，它工作正常：

import axios from 'axios';

export default function Model() 
  
    const url = "api.blabla.com/blabla"
    const [model, setModel] = useState()
    useEffect(() => 
      const axiosPosts = async () => 
        const response = await axios(url)
        setModel(response.data)
      ;
      axiosPosts();
    , []);

   console.log(model.slug) //prints the slug!!

    
    return (
      <div>
       model.slug : model.name // TypeError slug undefined
      </div>
    )  

这段代码有什么问题？

【问题讨论】：

长度在哪里？请注意，模型的 initial 状态确实是未定义的。

感谢您的编辑，您的问题已解决。

【参考方案1】：

api 响应需要时间，所以在开始时 model 被分配了您传递给 useState() 钩子的参数值​​。

你没有传递任何东西，所以在第一次反应渲染期间 model 是未定义的。

一种解决方案可能是将您的模板更改为：

model?.slug : model?.name

或者让它有条件

model && (
  <>
    model.slug : model.name
  </>
)

【讨论】：

非常感谢，它现在工作正常。从 API 获取时是否总是需要使用这样的数据，还是有其他方法（可能是更好的做法）？

更好的做法是创建另一个只有一个角色的组件：渲染数据。您只能在数据可用时显示此组件，就像我在第二个示例中向您展示的那样。

【参考方案2】：

在上面@ploppy 的回答中添加更多内容，这里的常见模式是

import axios from 'axios';

export default function Model() 

const url = "api.blabla.com/blabla"
const [status, setStatus] = useState("idle");
const [model, setModel] = useState(
  slug: "",
  name: ""
)
useEffect(() => 
  setStatus("pending");
  const axiosPosts = async () => 
    try
    const response = await axios(url)
    setModel(response.data)
    setStatus("resolved")
   catch(error)
    console.log(error);
    setStatus("rejected");
   
  ;
  axiosPosts();
, []);

console.log(model.slug) //prints the slug!!

if(status === "pending")
    return (<div>Loading...</div>)

if(status === "rejected")
    return (<div>Something went wrong!</div>)

return (
  <div>
   model.slug : model.name // TypeError slug undefined
  </div>
)  

这使您能够更好地处理 API 调用及其响应。