无法在不弄乱数组的情况下从数组中删除对象
约翰·阿什莫尔
我只是想从存储在本地存储中的数组中删除一个对象，然后在屏幕上刷新，但数组每次都按照上图显示混乱。
代码在其他地方保存和恢复正常，但不会以相同的方式编辑。
class Home extends Component {
constructor(props) {
super(props);
let notes = getLocalItem(keys.listOfItems);
if (!notes) {notes=[];}
this.state = {
title: '',
content: '',
notes: notes
}
}
// function to go to edit note page, but opening the relevant note to edit
editNoteClicked(clickedValue) {
setLocalItem(keys.noteToEdit, clickedValue);
this.props.history.push('/editnote');
}
deleteNoteClicked(clickedValue) {
let copyOfNotes = [this.state.notes]; // make a separate copy of the array
delete copyOfNotes[clickedValue]; // delete item in array
this.setState({ notes: copyOfNotes }, setLocalItem(keys.listOfItems, copyOfNotes)); //
//refresh page here
}
renderRows() {
let rows = [];
for (let i = 0; i < this.state.notes.length; i++) {
let currentNote = this.state.notes[i];
rows.push(
<div>{currentNote.title} - {currentNote.content}
<button className="btn" onClick={() => this.editNoteClicked(i)}>EDIT</button>
<button className="btn" onClick={() => this.deleteNoteClicked(i)}>DELETE</button>
</div>
);
}
return rows;
}
乌达拉克达斯
问题出在您的 deleteNoteClicked 函数中，请尝试以下代码，看看是否有效：-
deleteNoteClicked(clickedValue) {
let copyOfNotes = [...this.state.notes]; // make a separate copy of the array
copyOfNotes.splice(clickedValue, 1) // Remove item at position clickedValue
this.setState({ notes: copyOfNotes }, setLocalItem(keys.listOfItems, copyOfNotes));
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
尝试在不弄乱边框的情况下删除重复项
- 2
如何在不排序的情况下从对象输出数组
- 3
在不更改元素顺序的情况下删除数组中的重复项
- 4
在不创建新方法的情况下删除数组中的零
- 5
如何在不循环的情况下访问对象数组中的所有键和值
- 6
如何在不迭代数组的情况下从$ scope中删除对象？
- 7
在React中，如何在不映射整个对象的情况下获取数据并在状态数组中呈现单个对象？
- 8
如何在不覆盖第一行的情况下将相同的对象保存在数组列表中
- 9
如何在不连续重复 Javascript 中的两个特定属性的情况下对对象数组进行排序？
- 10
Ember.js如何在没有余烬数据的情况下从数组控制器中删除对象
- 11
如何在不遍历数组的情况下对数组中的每个元素调用方法？
- 12
在与其他数组匹配的情况下从数组中删除值
- 13
swift：如何在不创建包含上述对象数组的结构的情况下解码json对象数组？
- 14
如何在不构造对象的情况下，在运行时设置数组大小？
- 15
如何在不迭代数组的情况下提取对象数组中特定键的值？
- 16
Java GUI：我似乎无法在不弄乱GridLayout的情况下添加JLabel？
- 17
如何在不更改容器的情况下更改数组值（在对象数组内部）？javascript
- 18
在不级联删除的情况下链接Grails中的域对象
- 19
Javascript数组在不涉及功能的情况下进行更改
- 20
在C ++中没有任何内置函数的情况下从数组中删除元素
- 21
如何在不使用内置函数的情况下从python中的数组中删除元素
- 22
是否可以在不声明struct中特定大小的情况下创建数组？
- 23
如何仅在rethinkDB中不包含值的情况下追加到数组
- 24
在不循环的情况下访问3D numpy数组中的多个列
- 25
如何在不更改原始的情况下修改/更新numpy中的数组
- 26
如何在不排序的情况下找到数组中的最小数字？
- 27
如何仅在rethinkDB中不包含值的情况下追加到数组
- 28
如何获得在不获取JavaScript中重复值的情况下改组数组的概率
- 29
在不循环 VBA 的情况下将过滤的记录获取到数组变体中
我来说两句