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

Question

我最近在 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,
                    content: '',
                    author: '',
                }
            })
        }).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;

提前致谢！

标签： reactjsdjangoheroku