import React from 'react';import logo from './logo.svg';import './App.css';import CommentList from './CommentList'import CommentBox from './CommentBox'class App extends React.Component{  constructor(props){      super(props)      this.state={        comments:["hahahahahahahah","13"]      }      this.addComment=this.addComment.bind(this)      this.deleteComment=this.deleteComment.bind(this)  }  addComment(comment){    this.setState({      comments:[...this.state.comments,comment]    });  }  deleteComment(index){    let newComments=this.state.comments;    newComments.splice(index,1);    console.log(newComments);    this.setState=({      comments:newComments    });    console.log(this.state.comments)  }      render(){        const {comments} =this.state  return (    <div className="App">      <header className="App-header">        <img src={logo} className="App-logo" alt="logo" />        <p>          Edit <code>src/App.js</code> and save to reload.        </p>        <a          className="App-link"          href="https://reactjs.org"          target="_blank"          rel="noopener noreferrer"        >          Learn React        </a>      </header>      <CommentList comments={comments} deleteComment={this.deleteComment}/>      <CommentBox Componentlenth= {comments.length}  onAddComment={this.addComment}/>    </div>  );      }}export default App;

import React from 'react'class CommentList extends React.Component{   deleteCommenta(index){    this.props.deleteComment(index)    }render(){    const {comments}=this.props        return(        <div>            <label>评论列表</label>            <ul>                {comments.map((comment,index)=><li key={index}>{comment}                <button  type="button" onClick={()=>this.deleteCommenta(index)}>删除</button>                </li>)}            </ul>        </div>    )}}export default CommentList;