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

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

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

（表位于活动、开发和新闻选项卡下）

你知道这是什么原因吗

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;

import React，{useState}来自“React”；
从“./crud/CrudIntro/CrudIntro”导入CrudIntro；
从“./crud/crudad/crudad”导入crudad；
从“./crud/CrudTable/CrudTable”导入CrudTable；
常量MainCrud=props=>{
//项目数据
常量项目数据=[
{
id:1，
名称：“滑移装载机”，
说明：
“在60个月内以0%的融资额宣传滑移转向装载机。”，
日期：“2022年2月1日”
},
{
id:2，
名称：“工作手套”，
描述：“以15美元的价格宣传工作手套。”，
日期：“2022年2月15日”
},
{
id:3，
名称：“Telehanders”，
描述：“在24个月内以0%的融资额宣传Teleholders。”，
日期：“2022年3月15日”
}
];
const[projects，setProject]=useState（projectData）；
//添加项目
const addProject=project=>{
project.id=projectData.length+1；
setProject（[…项目，项目]）；
};
//删除项目
constdeleteproject=id=>{
setProject（projectData.filter（project=>project.id！==id））；
};
返回(
);
};
导出默认主积垢；

crudad.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;

import React，{Component}来自“React”；
导入“./crudad/crud add.scss”；
导入“../../button.scss”；
类CrudAdd扩展组件{
状态={
id:null，
姓名：“，
说明：“，
日期：“”
};
handleInputChange=e=>{
让输入=e.目标；
让name=e.target.name；
设value=input.value；
这是我的国家({
[名称]：值
});
};
handleFormSubmit=e=>{
e、 预防默认值（）；
this.props.addProject({
id:this.state.id，
名称：this.state.name，
description:this.state.description，
日期：this.state.date
});
这是我的国家({
//明确的价值观
姓名：“，
说明：“，
日期：“”
});
};
render（）{
返回(
this.setState（{name:e.target.value}）}
必修的
/>
this.setState（{description:e.target.value}）}
必修的
/>
this.setState（{date:e.target.value}）
必修的
/>
添加项目
);
}
}
导出默认crudad；

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;

import React，{Component}来自“React”；
导入“./crudTable/crud table.scss”；
类CrudTable扩展组件{
render（）{
const props=this.props；
返回(
项目名称
项目说明
日期
{props.projectData.length>0(
props.projectData.map（项目=>(
{project.name}
{project.description}
{project.date}
编辑
props.deleteProject（project.id）}
className=“btn btn危险”
>
删除
))
) : (
找不到项目。请添加项目。
)}
);
}
}
导出默认可积垢；

这是因为您正在过滤

项目数据。更新
deleteProject
方法以过滤
React。使用state
projects
变量，它将起作用

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

请参阅代码沙盒示例。
非常感谢@Paul！