正确处理异步表单提交中 textarea 元素值获取为 null 的问题

<form id="tweet-form" method="post">
    <div class="post-section-row">
        <a class="creator" href="{% url 'change_profile' %}"> 
            <img src="{{ user_profile.profile_picture.url }}" class="profile-pic small-post-section" >
        </a>
        <!-- 无法从此行检索值 -->
        <textarea id="post-content" name="tweet" placeholder="What's Happening?" oninput="autoExpand(this); checkCharacterCount(this)"></textarea>
    </div>

    <!-- ... 其他表单元素 ... -->

    <div class="post-section-row">
        <div class="error-message"></div>
        <div class="tweet-actions">
            <label for="picture" title="Upload Picture">
                <span class="material-symbols-outlined">photo_library</span>
                <span class="tooltiptext">Upload Picture</span>
                <input type="file" id="picture" name="tweet-picture" class="file-input" accept="image/jpeg, image/png, image/gif, image/jpg" onchange="previewTweetImage(event)">
            </label>                        
            <input type="submit" id="post-button" value="Post">
        </div>
    </div>
</form>

// ... 在 DOMContentLoaded 监听器内部 ...
tweetForm.addEventListener('submit', function(event) {
    event.preventDefault();

    const csrftoken = getCookie('csrftoken');
    const formData = new FormData(tweetForm); // formData 此时已包含 tweet 的值

    fetch("/post_tweet/", {
        method: "POST",
        body: formData,
        headers: {
            'X-CSRFToken': csrftoken,
        },
    })
    .then(response => response.json())
    .then(data => {
        console.log(data.message);

        // 此时尝试获取 tweetInput.value 返回 'null' 或空字符串
        const tweetInput = document.getElementById("post-content");
        const tweet = tweetInput.value; // 问题发生在此处

        // ...

        addPostToPage(tweet, tweetImage, username);
    })
    .catch(error => {
        console.log(error);
    }); 
});

const tweetForm = document.getElementById('tweet-form');

tweetForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 1. 在发送请求之前，捕获 textarea 的值并存储
    const tweetInput = document.getElementById("post-content");
    const tweetContent = tweetInput.value; // 将 textarea 的值存储在一个变量中

    const csrftoken = getCookie('csrftoken'); // 假设 getCookie 函数已定义
    const formData = new FormData(tweetForm); // formData 此时已包含所有表单数据，包括 tweetContent

    // 如果需要，可以在 formData 中明确添加或覆盖 'tweet' 字段，但通常 FormData(form) 已足够
    // formData.append('tweet', tweetContent); 

    fetch("/post_tweet/", {
        method: "POST",
        body: formData,
        headers: {
            'X-CSRFToken': csrftoken,
        },
    })
    .then(response => response.json())
    .then(data => {
        console.log(data.message);

        // 2. 在这里使用之前捕获的 tweetContent 变量进行 UI 更新
        // 此时无需再次从 DOM 中获取，因为 DOM 元素可能已被清空或状态改变
        addPostToPage(tweetContent, data.tweetImage, data.username); // 假设 data 中包含 tweetImage 和 username

        // 提交成功后，清空表单，为下一次输入做准备
        tweetForm.reset(); 
    })
    .catch(error => {
        console.error("提交推文时发生错误:", error);
        // 可以在此处显示错误消息给用户
    });
});