如何删除react js中的元素？
如何删除react js中的元素？
提问于 2021-09-05 21:41:56
我想用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回答 3
Stack Overflow用户
发布于 2021-09-05 21:59:19
要删除用户，回调(onClick)必须有足够的信息来标识要删除的用户。
在此示例中，您有一些选项：
- Remove by name。仅在用户名唯一的情况下：
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>
</>
)
})}
</>
)- 由元素本身删除。仅当元素在数组(对象本身)中不重复时：
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>
</>
)
})}
</>
)按数组索引删除
- 。仅当状态为数组时，通常为：
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添加到map和filter函数中。这通常会被忽略，但有时可能会有用。
如果在渲染和回调之间添加/删除元素的数组被重新排序，则此方法可能会失败，因此我不建议使用此方法，除非别无选择。
Stack Overflow用户
发布于 2021-09-05 22:14:26
看看useEffect代码。由于您将users作为依赖项，因此效果将获取对该状态所做的任何更改。状态改变，你做一个API调用，然后更新users，效果在下一次渲染时再次调用，你更新users in状态，users再次更新……等。
听起来您只需要一个空的依赖数组，以便在呈现组件时只调用一次效果。
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((users) => {
setUsers(users);
})
}, []);Stack Overflow用户
发布于 2021-09-05 22:24:26
尝试此操作，元素将被删除且不会刷新
import React, { useEffect, useState } from 'react';
const Example = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
setUsers(data);
// .then()
// .then(users => {
// setUsers(users);
// });
};
const deleteMe = index => {
setUsers(prevState => {
console.log(prevState);
return prevState.filter((e, i) => i !== index);
});
};
return (
<div>
{users.map((user, i) => {
return (
<div>
{' '}
{user.name}
<button onClick={() => deleteMe(i)}> Delete </button>
{/* <button onClick={}> Update </button> */}
</div>
);
})}
</div>
);
};
export default Example;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69067394
复制相关文章
相似问题
腾讯云开发者
