按索引从useState数组中删除元素
解决方案:更新输入元素的键值，以刷新输入元素的默认值=>内容。从数组中删除元素确实有效。谢谢你的帮忙!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>
)
}谢谢你的帮忙!
回答 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));注意，索引是回调的第二个参数，所以我在索引之前使用了一个,。
Stack Overflow用户
发布于 2022-08-05 10:02:11
在@Irfanullah的回答之后，您应该确定如何向学生展示。
下面是一个简单的例子：
const [students, setStudents] = useState([1, 2, 3]);
return (
<div>
{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);
}}
>
-
</button>
</div>
);以上代码将删除"index==1“的学生。
https://stackoverflow.com/questions/73247349
复制相似问题
腾讯云开发者
