我在列表中添加后，反应列表项就会消失

Question

我想从两个inputform中添加一个列表，并在编译后显示总列表，但是可以看到，该list-item已经添加但很快消失了，我不知道为什么... 在Inputform中添加某些内容后，它的状态已经更改，并且它们已经添加到“ this.state.tasklist”中，但是结果显示，它又消失了。

import React, { Component } from "react";

class Task extends Component {
constructor(props) {
  super(props);
  //this.handleSubmit = this.handleSubmit.bind(this);
  this.handleInputChange = this.handleInputChange.bind(this);
  this.handle = this.handle.bind(this);
}

handleInputChange(e) {
  this.props.handleInputChange(e);


}

handle(isChecked, title, content) {
  this.props.handle(isChecked, title, content);
}




render() {
  return (
  <div className="Task">
    <form
      onSubmit={() =>
        this.handle(
          this.props.isChecked,
          this.props.title,
          this.props.content
        )
      }
    >
      <label>IsChecked</label>
      <input
        name="isChecked"
        type="checkbox"
        checked={this.props.isChecked}
        onChange={this.handleInputChange}
      />
      <hr />
      <label>Title </label>
      <input
        name="title"
        type="text"
        value={this.props.title}
        onChange={this.handleInputChange}
      />
      <label>content</label>
      <input
        name="content"
        type="text"
        value={this.props.content}
        onChange={this.handleInputChange}
      />
      <button type="submit" value="Submit">
        {" "}
        Submit
      </button>
     </form>
    </div>
     );
   }
 }

export default Task;

import React from "react";
import { Button } from "antd";
import { Row, Col } from "antd";
import Tasklist from "./Tasklist";
import Task from "./Task";
 class Taskdata extends React.Component {
      constructor(props) {
     super(props);
    this.state = {
     isChecked: false,
     title: "",
     content: "",
     tasklist: [
       { id: 0, isChecked: false, title: "8u0", content: "sghfao" },
       { id: 1, isChecked: false, title: "45g8", content: "lhobn" },
       { id: 2, isChecked: false, title: "5h9", content: "oyhwg" }
      ]
    };
this.handleInputChange = this.handleInputChange.bind(this);
this.handle = this.handle.bind(this);
//this.handleClick = this.handleClick.bind(this);
}

 handleInputChange(e) {
   //const data = FormData(e.target);
   // console.log(data);
   const target = e.target;
   const value = target.type === "checkbox" ? target.checked : 
   target.value;
  const name = target.name;
  this.setState({ [name]: value }, () => {
  console.log(this.state);
 });

//console.log(tasklist[i]);
   console.log(this.state.title);
   console.log(this.state.content);
 }

 handle(isChecked, title, content) {
  const tasklist = this.state.tasklist.slice();
  const i = tasklist.length;
  const tasklistToBeAdd = {
    id: tasklist.length,
    isChecked: isChecked,
    title: title,
    content: content
  };
  tasklist[i] = tasklistToBeAdd;
//tasklist.push(tasklistToBeAdd);
//console.log(tasklist);
  this.setState({ tasklist: tasklist });
  console.log(this.state.tasklist);
}



render() {
  return (
   <div>
    <header className="Taskdata-header">
      <h1 className="Taskdata-title">Welcome, Logged</h1>
      <Button onClick={() => (window.location = "/login")}>Logout</Button>
    </header>
    <Row type="flex" justify="space-around">
      <Col span={8} xs={2} sm={4} md={6} lg={8} xl={8}>
        <Task
          isChecked={this.state.isChecked}
          title={this.state.title}
          content={this.state.content}
          tasklist={this.state.tasklist}
          handleInputChange={this.handleInputChange}
          handle={this.handle}
        />
      </Col>

      <Col span={8} xs={2} sm={4} md={6} lg={8} xl={16}>
        <Tasklist
          key={this.state.tasklist.id}
          tasklist={this.state.tasklist}
        />
      </Col>
    </Row>
  </div>
   );
  }
 }
export default Taskdata;

import React from "react";
import _ from "lodash";
import { Row, Col, Card } from "antd";

class Tasklist extends React.Component {
  render() {
    const tasklists = this.props.tasklist;

     const list = (
      <ul>
         {_.map(tasklists, tasklist => (
          <li key={tasklist.id} checked={tasklist.isChecked}>
            {tasklist.id}
          </li>
        ))}
      </ul>
    );
    const content = _.map(tasklists, tasklist => (
      <div key={tasklist.id}>
       <Row>
         <Col>
            <Card title={tasklist.title} bordered={false}>
          {tasklist.content}
        </Card>
      </Col>
    </Row>
  </div>
));
return (
  <div>
    {list}
    <hr />
    {content}
  </div>
  );
 }
}

 export default Tasklist;