React中State被事件初始化

Question

问题描述

在学习React中，遇到个State被重置的问题，这是一个发表评论的问题，我填好用户名，发表评论这两个表单项，点击button增加，期望是右边评论列表会增加一条评论，事实上也增加了，但是是一闪而过，然后state被重置了。
求大佬们帮助下小弟！

相关代码

import React, {Component} from 'react'
import CommentAdd from '../comments-add/comments-add'
import CommentList from '../comments-list/comments-list'
export default class App extends Component {
      state={
        comments:[
            {user:'tom',content:'还不错'},
            {user:'terry',content:'很好'},

        ]
    }
    addComment=(comment)=>{
        const {comments}=this.state;
        if(!comment){
            return
        }
        comments.unshift(comment)
        this.setState({comments})
    }


    render() {
        const {comments}=this.state;
        return (<div>
            <header className="site-header jumbotron">
                <div className="container">
                    <div className="col-xs-12"><h1>请发表对React的评论</h1></div>
                </div>
            </header>
            <div className='container'>
                <div className='row'>
                    <CommentAdd addComment={this.addComment}/>
                    <CommentList  comments={comments}/>
                </div>
            </div>
        </div>
        )
    }
}

import React, {Component} from 'react'
import PropTypes from'prop-types'
export default class CommentAdd extends Component {
    static propTypes={
        addComment:PropTypes.func.isRequired
    }
    state={
        user:"",
        content:""
    }
    handleSubmit =()=>{
        //获取数据
        const comment=this.state;
        //更新数据
        this.props.addComment(comment)
        //清空表单
        this.setState({
            user:"",
            content:""
        })
    }
    handleUsername=(event)=>{
        const user=event.target.value;
        this.setState({user})
    }

    handleContent=(event)=>{
        const content=event.target.value;
        this.setState({content})
    }

    render(){

        const {user,content}=this.state;
        return (<div className='col-md-4'>
            <form className='form-horizontal'>
                <div className="form-group">
                    <label>用户名</label>
                    <input type="text" className="form-control" placeholder="用户名" value={user} onChange={this.handleUsername}/>
                </div>
                <div className="form-group">
                    <label>评价内容</label>
                    <textarea rows="6" className="form-control" placeholder="评价内容" value={content} onChange={this.handleContent}/>
                </div>
                <div className="form-group">
                    <div className='col-sm-offset-2 col-sm-10'>
                        <button className='btn btn-default pull-right ' onClick={this.handleSubmit}>提交</button>
                    </div>
                </div>
            </form>
        </div>
        )

    }
}

import React, {Component} from 'react'
import '../comments-item/item.css'
import CommentItem from '../comments-item/comments-item'
import PropTypes from 'prop-types'
export default class CommentList extends Component {
    static propTypes={
        comments: PropTypes.array.isRequired
    }
    render() {
        const {comments}=this.props;
        return (<div className='col-md-8'>
                <h3 className=''>评论回复:</h3>
                <h2 style={{display:'none'}}>暂无评论，点击左侧添加评论</h2>
                <ul>
                    {
                        comments.map(
                        (comment, index) =>
                            <CommentItem comment={comment} key={index}/>)

                    }
                </ul>
            </div>
        )

    }
}

import React, {Component} from 'react'
import '../comments-item/item.css'
import CommentItem from '../comments-item/comments-item'
import PropTypes from 'prop-types'
export default class CommentList extends Component {
    static propTypes={
        comments: PropTypes.array.isRequired
    }
    render() {
        const {comments}=this.props;
        return (<div className='col-md-8'>
                <h3 className=''>评论回复:</h3>
                <h2 style={{display:'none'}}>暂无评论，点击左侧添加评论</h2>
                <ul>
                    {
                        comments.map(
                        (comment, index) =>
                            <CommentItem comment={comment} key={index}/>)

                    }
                </ul>
            </div>
        )

    }
}

Answer 1

CommentAdd组件里this.props.addComment的参数是this.state，导致App里addComment的comment也是指向CommentAdd的state的，是同一个引用，所以CommentAdd的清空也会导致外部的清空