数据库没有保存在我部署在 Heroku 上的 Django 应用程序中

问题描述

我最近在 heroku 上使用 django 部署了我的投资组合。该应用程序正在从 github 设置自动部署。它包含一个看起来像这样的评论框。您可以在 --> https://anujdhillon.herokuapp.com/ 亲眼看到

GET 和 POST 请求都运行良好，即当我发布新评论时，它确实显示在评论列表中。但是，几个小时后，所有发布的新评论都会自动删除，我无法弄清楚为什么会发生这种情况。 django 源代码 --> https://github.com/anujdhillon/my-portfolio

组件是用ReactJS编写的，下面是它的源码 -->

import React from 'react';

class CommentSection extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            commentList:[],activeItem: {
                id:null,content: '',author: '',},editing: false,}
        this.fetchComments = this.fetchComments.bind(this);
        this.handleContentChange = this.handleContentChange.bind(this);
        this.handleAuthorChange = this.handleAuthorChange.bind(this);
        this.postComment = this.postComment.bind(this);
        this.getCookie = this.getCookie.bind(this)

    };

    getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0,name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    componentDidMount(){
        this.fetchComments();
    }

    fetchComments(){
        fetch('https://anujdhillon.herokuapp.com/api/comment-list/')
        .then(response => response.json())
        .then(data =>
            this.setState({
                commentList: data
            }
            )
        )
    }

    handleContentChange(e){
        var name = e.target.name;
        var value = e.target.value;
        this.setState({
            activeItem:{
                ...this.state.activeItem,content:value
            }
        })
    }
    handleAuthorChange(e){
        var name = e.target.name;
        var value = e.target.value;
        this.setState({
            activeItem:{
                ...this.state.activeItem,author:value
            }
        })
    }

    postComment(){
        var csrftoken = this.getCookie('csrftoken')
        var url = 'https://anujdhillon.herokuapp.com/api/comment-create/'
        fetch(url,{
            method: 'POST',headers:{
                'Content-type': 'application/json','X-CSrftoken':csrftoken,body:JSON.stringify(this.state.activeItem)
        }).then((response) => {
            console.log(this.state.activeItem)
            this.fetchComments()
            this.setState({
                activeItem: {
                    id:null,}
            })
        }).catch(function(error){
            console.log("Error: ",error)
        })
    }



    render() { 
        var comments = this.state.commentList;
        return (
        <div className="comment-Box">
                <div className="write-area">
                    <div className="inputtext">
                        <textarea type="text"  maxlength="200" id="content" name="content" placeholder="Write comment..." value = {this.state.activeItem.content} onChange={this.handleContentChange}/>
                        <textarea type="text"  maxlength="200" id="author" name="author" placeholder="Write your name..." value = {this.state.activeItem.author} onChange={this.handleAuthorChange}/>
                    </div>
                    <div className="submit-button">
                        <button onClick={ () => this.postComment() } className="btn">Send</button>
                    </div>
                </div>
                <div className="display-area">
                {
                    comments.map((item) =>{
                        return <div className="comment">
                                <div className="comment-info">
                                    <span className="comment-author">{ item.author }</span>
                                    <p>
                                        {item.date_created}
                                    </p>
                                </div>
                                <div className="comment-body">
                                    <p>
                                    { item.content}
                                    </p>
                                </div>            
                   </div>
                    })
                }
                </div>
            </div>
        )
    }
}
export default CommentSection;

提前致谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）