I am trying to retrieve some data from an API. When I console the data it works fine:

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>
    )  

What can be the problem with this code?

CodePudding user response：

It takes time for the api to respond, so at the start model is assigned the value of the parameter you passed to the useState() hook which.

You passed nothing so during the first react render model is undefined.

One solution could be to change your template to:

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

Or make it conditional

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

CodePudding user response：

adding more to @ploppy's answer above, a common pattern here would be

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>
)  

This gives you a good advantage to handle API calls and their responses better.