Я пытаюсь получить некоторые данные из 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>
    )  

В чем может быть проблема с этим кодом?

1
Yusuf Yeşilyurt 10 Окт 2021 в 13:12

2 ответа

Лучший ответ

Для ответа api требуется время, поэтому в начале model присваивается значение параметра, который вы передали ловушке useState(), которая.

Вы ничего не передали, поэтому во время первого рендеринга реакции model не определено.

Одним из решений может быть изменение вашего шаблона на:

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

Или сделайте это условным

{model && (
  <>
    {model.slug} : {model.name}
  </>
)}
1
Ploppy 10 Окт 2021 в 10:16

Добавив больше к ответу @ 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 и их ответов.

-1
Sai Kranthi 10 Окт 2021 в 10:32