|
|
相关文章推荐
|
高大的圣诞树 · 指定的索引键不在字典中怎么办 ...· 2 月前 · |
|
|
唠叨的豆芽 · Pandas中multiindex转换成列_ ...· 3 周前 · |
|
|
冲动的凉茶 · Arcgis ...· 1 年前 · |
|
|
宽容的企鹅 · 抽象类与抽象方法 - 掘金· 1 年前 · |
|
|
文雅的小蝌蚪 · vue 使用 vue-pdf ...· 1 年前 · |
|
|
急躁的伏特加 · QPlainTextEdit 和 ...· 1 年前 · |
按索引从useState数组中删除元素
EN
问
按索引从useState数组中删除元素
Stack Overflow用户
提问于
2022-08-05 09:12:37
回答 3
查看 208
关注 0
票数 0
解决方案:更新输入元素的键值，以刷新输入元素的默认值=>内容。从数组中删除元素确实有效。谢谢你的帮忙!src： https://thewebdev.info/2022/05/12/how-to-fix-react-input-defaultvalue-doesnt-update-with-state-with-javascript/#:~:text=state%20with%20JavaScript%3F-,To%20fix%20React%20input%20defaultValue%20doesn't%20update%20with%20state,default%20value%20of%20the%20input .
我的代码中有一个useState数组，它表示学生的lisst：
const [students, setStudents] = useState([""]);
这个数组被映射到学生元素：
{students.map((student, index) => <Student setStudents={setStudents} students={students} id={index} key={index} content={student} />)}
，我还得到了一个AddStudent元素，它将学生添加到数组中。
function AddStudent(props) {
const {setStudents} = props;
return (
<button className="change-student add-student" onClick={() => {
setStudents((students) => [...students, ""])
</button>
}RemoveStudent组件应该通过数组中的索引删除学生。我尝试过许多不同的方法，但没有一种是正确的。我怎么才能让它起作用？这是我的代码：
function RemoveStudent(props) {
const {students, setStudents, id} = props;
return (
<button className="change-student remove-student" onClick={() => {
let data = students;
if(id > -1) {
data.splice(id, 1);
console.log(data)
// setStudents(data)
// alternative:
// setStudents(students.filter(index => index !== id)); // removes the last element in the list
// doesn't work properly
</button>
}谢谢你的帮忙!
EN
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-08-05 11:26:31
Stack Overflow用户
发布于 2022-08-05 09:23:04
您需要先复制
students
数组，然后尝试按索引删除学生。我想
id
是指删除学生的索引。然后你可以尝试这样的方法：
function RemoveStudent(props) {
const {students, setStudents, id} = props;
return (
<button
className="change-student remove-student"
onClick={() => {
if(id > -1) {
const data = [...students]; // making a copy
data.splice(id, 1); // removing at index id
console.log(data)
setStudents(data)
</button>
}
使用
array.filter()
时，您在如何将回调传递给
filter()
方法时出错。请试用以下方法：
setStudents(students.filter((,index) => index !== id));
注意，索引是回调的第二个参数，所以我在索引之前使用了一个
,
。
票数 1
EN
Stack Overflow用户
发布于 2022-08-05 10:02:11
在@Irfanullah的回答之后，您应该确定如何向学生展示。
下面是一个简单的例子：
const [students, setStudents] = useState([1, 2, 3]);
return (
{students.map((student, index) => {
return <div>{student}</div>; // show the value not the index
<button
onClick={() => {
let id = 1;
const copy = [...students];
copy.splice(id, 1)
console.log(copy)
setStudents(copy);
推荐文章
|
|
宽容的企鹅 · 抽象类与抽象方法 - 掘金 1 年前 |