从 ReactJS 中的数组中删除一个项目

Question

我正在学习 React，但我似乎无法弄清楚如何从数组中删除项目。我尝试了几种方法，但它要么删除了整个数组，要么删除了数组中的多个项目，因此我找不到任何可行的解决方案。这是我的代码：

App.js:

import React, { useState } from 'react';
import Education from './Education';

export default function App() {
  const [educationArray, setEducationArray] = useState([]);
  const handleDeleteEduItem =(id)=>{
  
    const eduArrayToSplice = [...educationArray]
    const newEduArray = eduArrayToSplice.splice(id, 1)
    
    setEducationArray(newEduArray)
    console.log(id)
  }
  return (
    <div className="App">
    <div className="edit-mode">
    <h4>Education</h4>
    <button onClick={()=>{setEducationArray([...educationArray, <Education id={educationArray.length} handleDeleteButton={handleDeleteEduItem}/>])}}>add new</button>
    {educationArray.map((eduItem, i)=><div className="eduItem" key={i}>{eduItem}</div>)}
       
     
    </div>
    </div>
      
  );
}

以及功能组件：

import React, { useState} from 'react';

function Education(props)

 {
       const [schoolName, setSchoolName] = useState('');
       const [major, setMajor] = useState('');
       const [studyFrom, setStudyFrom] = useState('')
       const [studyTo, setStudyTo] = useState('');
       const [degree, setDegree] = useState('');
       const [displayEducationSection, setEducationSection] = useState(false)
      
    

       const changeSchoolName = (e) => {
              setSchoolName(e.target.value);
            };
          
       const changeMajor = (e) => {
              setMajor(e.target.value);
            };
       const changeStudyFrom =(e)=> {
              setStudyFrom(e.target.value);
            };
       const changeStudyTo =(e)=> {
              setStudyTo(e.target.value)
            };
       const changeDegree =(e) => {
              setDegree(e.target.value);
            };
       const flipEducationSection =()=> {
              setEducationSection(!displayEducationSection)
            };
   

          
          
    return(
        <div className="education-section">
            {displayEducationSection ? 
            <div>
              <p>School Name: {schoolName}</p>
              <p>Major: {major}</p>
              <p>from: {studyFrom}</p>
              <p>to: {studyTo}</p> 
              <p>Degree: {degree}</p> 

            </div>
            :
            <form onSubmit={(e)=>e.preventDefault()} className="education-form">
            <label>
                   School Name:<input value={schoolName} onChange={changeSchoolName} />
            </label>
            <label>
                   Major:<input value={major} onChange={changeMajor} />
            </label>
            <label>
                   From:<input value={studyFrom} onChange={changeStudyFrom} />
            </label>
            <label>
                   To:<input value={studyTo} onChange={changeStudyTo} />
            </label>
            <label>
                   Degree:<input value={degree} onChange={changeDegree} />
            </label>

                
            </form>}
            <button onClick={flipEducationSection}>{displayEducationSection ? 'edit' : 'save'}</button>
            <button onClick={()=>props.handleDeleteButton(props.id)}>delete</button>
        </div>
    )

}



export default Education;

我还使用了以下函数来尝试从数组中删除一个项目，但它并没有删除被点击的项目，而是删除了它之后的所有项目：

const handleDeleteEduItem =(id)=>{
  const newEduArray = educationArray.filter((item)=>educationArray[item] !== id)
  
  setEducationArray(newEduArray)
  console.log(educationArray)
}

Answer 1

我想你不想直接过滤状态。你可以做的是：

setEducationArray((cv) => cv.filter((e) => e.id !== id ))

通过这种方式，您可以访问 educationArray 状态 (cv) 中的当前值，并对其进行过滤以获取 e.id 不等于您提供给 id 的 id 的所有元素。

编辑：

公平地说，我不确定您的数组最终会是什么样子。但是如果它是一个对象数组，每个对象都有自己的 id。然后我会建议我上面写的东西。

Answer 2

您不能使用相同的内存位置直接更新状态。您必须为更新的数组创建新内存，然后更新组件状态。您会在 UI.

上看到快速变化

否则此函数将帮助您从数组中删除单个项目。你必须

ensure that your id should be unique for each item.

const handleDeleteEduItem =(id)=>{

const eduArrayToSplice = [...educationArray.filter(item)=>item.id!==id)]   
setEducationArray(newEduArray)
console.log(id)

}

从 ReactJS 中的数组中删除一个项目

removing an item from an array in ReactJS

javascript

reactjs

react-functional-component