如何在 ReactJS 中一次只删除一项？

Question

我想，当用户删除行时，只删除该行。 目前这只是偶尔发生。 当您只剩下两个要删除的项目时，当您单击删除按钮时，该行的数据会切换并自行替换。 它实际上并没有删除。

• mainCrud.js - 包含添加和删除
• crudAdd.js - 定义状态、事件处理程序、呈现表单本身
• crudTable.js - 映射在 mainCrud.js 中定义的预定义行，呈现表本身

链接到 CodeSandbox （表格位于活动、开发和新闻标签下）。

知道是什么原因造成的吗？

MainCrud.js

import React, { useState } from "react";

import CrudIntro from "../crud/crudIntro/crudIntro";
import CrudAdd from "../crud/crudAdd/crudAdd";
import CrudTable from "../crud/crudTable/crudTable";

const MainCrud = props => {
  // Project Data
  const projectData = [
    {
      id: 1,
      name: "Skid Steer Loaders",
      description:
        "To advertise the skid steer loaders at 0% financing for 60 months.",
      date: "February 1, 2022"
    },
    {
      id: 2,
      name: "Work Gloves",
      description: "To advertise the work gloves at $15.",
      date: "February 15, 2022"
    },
    {
      id: 3,
      name: "Telehandlers",
      description: "To advertise telehandlers at 0% financing for 24 months.",
      date: "March 15, 2022"
    }
  ];

  const [projects, setProject] = useState(projectData);

  // Add Project
  const addProject = project => {
    project.id = projectData.length + 1;
    setProject([...projects, project]);
  };

  // Delete Project
  const deleteProject = id => {
    setProject(projectData.filter(project => project.id !== id));
  };

  return (
    <div>
      <section id="add">
        <CrudIntro title={props.title} subTitle={props.subTitle} />
        <CrudAdd addProject={addProject} />
      </section>
      <section id="main">
        <CrudTable projectData={projects} deleteProject={deleteProject} />
      </section>
    </div>
  );
};

export default MainCrud;

CrudAdd.js

import React, { Component } from "react";

import "../crudAdd/crud-add.scss";
import "../../button.scss";

class CrudAdd extends Component {
  state = {
    id: null,
    name: "",
    description: "",
    date: ""
  };

  handleInputChange = e => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value
    });
  };

  handleFormSubmit = e => {
    e.preventDefault();

    this.props.addProject({
      id: this.state.id,
      name: this.state.name,
      description: this.state.description,
      date: this.state.date
    });

    this.setState({
      // Clear values
      name: "",
      description: "",
      date: ""
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <input
            name="name"
            type="name"
            placeholder="Name..."
            id="name"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
            required
          />
          <input
            name="description"
            type="description"
            placeholder="Description..."
            id="description"
            value={this.state.description}
            onChange={e => this.setState({ description: e.target.value })}
            required
          />
          <input
            name="date"
            type="name"
            placeholder="Date..."
            id="date"
            value={this.state.date}
            onChange={e => this.setState({ date: e.target.value })}
            required
          />
          <button type="submit" className="btn btn-primary">
            Add Project
          </button>
        </form>
      </div>
    );
  }
}

export default CrudAdd;

CrudTable.js

import React, { Component } from "react";

import "../crudTable/crud-table.scss";

class CrudTable extends Component {
  render() {
    const props = this.props;
    return (
      <div>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Project Name</th>
                <th scope="col">Project Description</th>
                <th scope="col">Date</th>
                <th scope="col">&nbsp;</th>
              </tr>
            </thead>
            <tbody>
              {props.projectData.length > 0 ? (
                props.projectData.map(project => (
                  <tr key={project.id}>
                    <td>{project.name}</td>
                    <td>{project.description}</td>
                    <td>{project.date}</td>
                    <td>
                      <button className="btn btn-warning">Edit</button>
                      <button
                        onClick={() => props.deleteProject(project.id)}
                        className="btn btn-danger"
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td>No projects found. Please add a project.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default CrudTable;

Answer 1

这是因为您正在过滤projectData 。 更新您的deleteProject方法以过滤您的React.useState projects变量，它将起作用。

const deleteProject = id => {
  setProject(projects.filter(project => project.id !== id));
};

请参阅此处的代码沙箱示例。