Содержание Dynami c не обновляется после отправки формы в JavaScript

Question

Он отображается после того, как я снова нажал кнопку сохранения, поэтому в основном это шаг назад, он обновляет базу данных, но загружается после второго щелчка . Что-то определенно не так с моим кодом:

const fetchTweets = async () => {
        let tweets = await axios.get(url);
        return tweets.data.response;
    }

Затем функция, которая вызывается при загрузке страницы:

const showTweets = async () => {
        let tweets = await fetchTweets();
        let list = ''
        let tweetsElement = document.querySelector('#tweets')
        for(let tweet of tweets) {
            list += tweetFormat(tweet);
        }
        tweetsElement.innerHTML = list;
    }
    showTweets()

Но когда я отправляю обработать форму, используя это, она выиграла ' t обновить страницу, хотя я вызываю showTweets () функцию:

const tweetFormElement = document.querySelector('#tweet-create-form');
    document.addEventListener('submit', (event) => {
        event.preventDefault();
        const formData = new FormData(event.target);
        const url = event.target.getAttribute('action');
        const method = event.target.getAttribute('method');
        axios({
            method: method,
            url: url,
            data: formData
        }).then((res) => {
            console.log(res);
        })
        showTweets() // <-- calling it here
    });

Данные отображаются на странице, когда я снова нажимаю «Отправить», но затем он обновляет базу данных ДВАЖДЫ. Пожалуйста, если кто-нибудь может помочь.

Answer 1

Вы не ждете запроса на завершение sh перед загрузкой твитов.

Переместите showTweets внутрь .then:

axios({
  method: method,
  url: url,
  data: formData
}).then((res) => {
  console.log(res);
  showTweets()
})

Кроме того, вы, вероятно, предназначен для добавления слушателя отправки только в tweetFormElement вместо всего документа:

tweetFormElement.addEventListener('submit', // ...