时间戳

首页 > 解决方案 > 我怎样才能删除反应js中的元素

javascript - 我怎样才能删除反应js中的元素

问题描述

我想用 react js 创建一个简单的应用程序，它应该在显示器中显示用户，然后当我点击删除按钮时，它应该删除以下项目，但是我有一些错误。

import React, { useEffect, useState } from 'react'
const App = () => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => {
        setUsers(users);
      })
  }, [users]);

  const deleteMe = () => {
    setUsers(prevState => {
      return prevState.filter(e => e.name)
    })
  }

  return (
    <>
      {users.map((user) => {
        return (
          <>
            <div> {user.name}
              <button onClick={deleteMe}> Delete </button>
              {/* <button onClick={}> Update </button> */}
            </div>
          </>
        )
      })}
    </>
  )
}

export default App

标签： javascriptreactjsfetch

解决方案

要删除用户，回调 ( onClick) 必须有足够的信息来识别要删除的用户。

在此示例中，您有一些选择：

  1. 按名称删除。仅当用户名唯一时：
const deleteMe = (userName) => {
    setUsers(prevState => {
        return prevState.filter(e => e.name !== userName)
    })
}

return (
    <>
        {users.map((user) => {
            return (
                <>
                    <div> {user.name}
                    <button onClick={() => deleteMe(user.name)}> Delete </button>
                    {/* <button onClick={}> Update </button> */}
                    </div>
                </>
            )
        })}
    </>
)
  1. 由元素本身移除。仅当元素在数组中不重复时（对象本身）：
const deleteMe = (user) => {
    setUsers(prevState => {
        return prevState.filter(e => e !== user)
    })
}

return (
    <>
        {users.map((user) => {
            return (
                <>
                    <div> {user.name}
                    <button onClick={() => deleteMe(user)}> Delete </button>
                    {/* <button onClick={}> Update </button> */}
                    </div>
                </>
            )
        })}
    </>
)
  1. 按数组索引删除。仅当状态是数组时，通常：
const deleteMe = (userIndex) => {
    setUsers(prevState => {
        return prevState.filter((e, i) => i !== userIndex)
    })
}

return (
    <>
        {users.map((user, i) => {
            return (
                <>
                    <div> {user.name}
                    <button onClick={() => deleteMe(i)}> Delete </button>
                    {/* <button onClick={}> Update </button> */}
                    </div>
                </>
            )
        })}
    </>
)

了解如何将第二个参数i添加到mapandfilter函数中。这通常被忽略，但有时它可能很有用。

由于如果在渲染和回调之间添加/删除元素的数组重新排序，则此方法可能会失败，因此除非没有其他选择，否则我不会推荐它。

推荐阅读