Question

我正在尝试构建一个 CV 构建器，用户可以输入公司、日期、职位、位置等信息，并在用户按下保存按钮时将其保存在数组中。然后，该数组以带有删除按钮的 HTML 形式呈现。

我希望删除按钮只删除数组中的一项。例如，如果我们创建了两家我参与过的公司，它会为它们创建一个删除按钮

我希望当我们单击一次删除按钮时，并非数组中的所有项目都被删除，而这正是我的代码当前正在执行的操作。我无法找出执行此操作的逻辑，我只尝试过此过滤器方法，但它删除了所有项目...

import React, { useState } from "react";
import '../styles/style.css'

const Experience = (props) => {
  const [toggle, setToggle] = useState(false);
  const [input, setInput] = useState({title: "", company: "", date: "", location: "", description: ""})
  const [result, setResult] = useState([])


  const togglePopup = () => {
    setToggle(!toggle);
  }

  const saveForm = (e) => {
    e.preventDefault()
    setResult(result.concat(input))
  }
  const removeItems = (data) => {
      setResult(result.filter(todo => todo.title === data.title));
  }
console.log(result)

    return(
      <ul>
      <button onClick={togglePopup}>Work Experience</button>
      {result.map((data) => (
        <>
        <p key={data.title}>{data.title}</p>
        <p>{data.company}</p>
        <p>{data.date}</p>
        <p>{data.location}</p>
        <p>{data.description}</p>
        <button onClick={removeItems}>Remove</button>
        </>
      ))}
      {toggle && <form>
        <div>
          <label>Job Title</label>
        </div>
        <div>
          <input value={input.title} onChange={ e => {setInput({ title: e.target.value }) }}/>
        </div>
        <div>
          <label>Company</label>
        </div>
        <div>
          <input onChange={ e => {setInput({...input, company: e.target.value }) }}/>
        </div>
        <div>
          <label>Date Worked (MM/YYYY - MM/YYYY)</label>
        </div>
        <div>
          <input onChange={ e => {setInput({...input, date: e.target.value }) }}/>
        </div>
        <div>
          <label>Location (e.g. Los Angeles, CA)</label>
        </div>
        <div>
          <input onChange={ e => {setInput({...input, location: e.target.value }) }}/>
        </div>
        <div>
          <label>Description</label>
        </div>
        <div>
          <input onChange={ e => {setInput({...input, description: e.target.value }) }}/>
        </div>

        <button onClick={saveForm}>Save</button>
        <button onClick={togglePopup}>Cancel</button>
       </form>}
     </ul>
    )
  }

export default Experience

Answer 1

您需要传递特定对象以匹配和删除喜欢-

<button onClick={() => removeItems(data)}>Remove</button>

改进：

  {result.map((data) => (
      <>
        <p key={data.title}>{data.title}</p>
        <p>{data.company}</p>
        <p>{data.date}</p>
        <p>{data.location}</p>
        <p>{data.description}</p>
        <button onClick={() => removeItems(data)}>Remove</button>
      </>
   ))}

function -> 删除被点击的特定内容。

const removeItems = (data) => {
      const updated = result.filter(todo => todo.title !== data.title)
      setResult([...updated]);
  }

为什么这会一次删除数组中的所有项目？反应

1 个答案: