React-Axios => 无法读取未定义的属性（读取 'length'）

Question

我正在尝试从 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>
    )

这段代码可能有什么问题？

Answer 1

api 响应需要时间，因此在开始时 model 被分配给您传递给 useState() 挂钩的参数值。

您未传递任何内容，因此在第一次反应渲染期间 model 未定义。

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

{model?.slug} : {model?.name}

或者让它成为有条件的

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

Answer 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 呼叫及其响应提供了一个很好的优势。

React-Axios => 无法读取未定义的属性（读取 'length'）

React-Axios => Cannot read properties of undefined (reading 'length')

javascript

api

reactjs

axios

use-effect