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

但是当我用这个函数提交表单的时候 即使我调用了这个函数 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

你没有等待请求完成后再加载推文。

移動 showTweets 里面 .then:

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

另外，您可能是想将提交监听器添加到 tweetFormElement 而不是整个文件。

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