在 JavaScript 中提交表单后动态内容不更新答案

【问题标题】：Dynamic content not updating after form submission in JavaScript在 JavaScript 中提交表单后动态内容不更新
【发布时间】：2020-05-27 21:25:14
【问题描述】：

它在我再次点击保存按钮后显示，所以基本上它落后了一步，它会更新数据库但在第二次点击后加载。我的代码肯定有问题：

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

当我再次单击提交时，数据显示在页面上，但随后它更新了数据库两次。请如果有人可以提供帮助。

【问题讨论】：

我找到了一个解决方法，我现在在 console.log() 之后调用 .then(res) 中的 fetchTweets() 函数。它正在工作，但不确定它是否是正确的方法。
是的，你应该这样做。

标签： javascript node.js django dom-events

【解决方案1】：

在加载推文之前，您无需等待请求完成。

将showTweets 移动到.then 内：

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

此外，您可能只想将提交侦听器添加到 tweetFormElement 而不是整个文档：

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

【讨论】：