从ReactJ中的阵列中删除项目

Question

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

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 ))

这样，您就可以访问您的教育节目（CV）中的当前值，并过滤以获取所有元素，而E.ID不等于您给出的ID的所有元素。

编辑：

公平地说，我不确定您的数组最终如何。但是，如果它是一系列对象，则每个对象都有自己的ID。然后，我建议我上面写的东西。

Answer 2

您无法使用相同的内存位置直接更新状态。
您必须创建新的内存才能更新数组，然后更新组件状态。您将很快看到UI上的更改。

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

确保您的ID对于每个项目都唯一。

const andleteleteleteDuitem =（id）=＆gt; {

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

}