时间戳

首页 > 解决方案 > 在 JavaScript 中提交表单后动态内容不更新

javascript - 在 JavaScript 中提交表单后动态内容不更新

问题描述

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

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

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

标签： javascriptnode.jsdjangodom-events

解决方案

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

showTweets在里面移动.then：

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

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

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

推荐阅读