Блог

Главная - Вопросы по программированию - обеспечение завершения вызова axios api для реквизитов перед отображением дочернего компонента

обеспечение завершения вызова axios api для реквизитов перед отображением дочернего компонента

#javascript #reactjs #react-redux #react-hooks #use-effect

Вопрос:

У меня есть код ниже:

 function StoryCarousel(props) {
    const [ivrDests, setIVRDests] = useState([]);

    useEffect(() => {
        async function getIVRDests() {
          var data = {
            "customer-id": customer_id
          };
          let response = await axios.post(`http://localhost:2000/files/get-ivr-dests`, data)
          //let response = await axios.post(`/files/get-files`, data)
          setIVRDests(response.data)
        }
        getIVRDests() 
        
    }, []);

  return (
    <div className="StoryCarousel">
        <StoryCarouselItem ivr_dests={ivrDests} options={props.options} />
    </div>
  );
}

Этот код иногда работает, так как вызов api завершится вовремя, а затем успешно передаст данные дочернему компоненту в качестве поддержки. Однако иногда вызов api не завершен, что означает, что ivr_dests не имеет значения, которое связано с моим дочерним компонентом. Могу ли я в любом случае сделать так, чтобы ivrDests должны быть заполнены перед запуском storycarouselitem?

Спасибо

Ответ №1:

Это должно сработать:

 function StoryCarousel(props) {
    const [ivrDests, setIVRDests] = useState([]);

    useEffect(() => {
        async function getIVRDests() {
          var data = {
            "customer-id": customer_id
          };
          let response = await axios.post(`http://localhost:2000/files/get-ivr-dests`, data)
          //let response = await axios.post(`/files/get-files`, data)
          setIVRDests(response.data)
        }
        getIVRDests() 
        
    }, []);

  return (
    <div className="StoryCarousel">
        {ivrDests.length != 0 amp;amp; <StoryCarouselItem ivr_dests={ivrDests} options={props.options} />}
    </div>
  );
}

Вы также можете использовать пользовательский хук (или получить библиотеку, которая его предоставляет, например https://react-query.tanstack.com/), а затем установите флаг загрузки.

Метки: