我对 React 还很陌生,我正在尝试通过构建一个简单的笔记应用程序来练习。据我所知,一切进展顺利,但是!我读到不应手动更新状态,因此我正在复制状态数组并过滤出删除操作的结果。
但是失败了!相反,如果我控制台日志,它会正确地从状态数组中删除要删除的元素,但是,当我在副本上调用 setState() 来更新 View 时,列表是错误的!
由于某种原因,我的 React 列表总是从页面中直观地删除最后一个元素,并且与我的状态不同步。
应用程序本身是一个带有嵌套列表和列表项组件的表单容器,它使用表单类中的 Prop 进行管理。
我做错了什么?
表单类
class NotesForm extends Component {
constructor(props) {
super(props);
const list = [
{ text: "Build out UI" },
{ text: "Add new note" },
{ text: "delete notes" },
{ text: "edit notes" }
];
this.state = {
'notes': list
};
// this.notes = list;
this.handleSubmit = this.handleSubmit.bind(this);
this.deleteNote = this.deleteNote.bind(this);
}
handleSubmit(e) {
e.preventDefault();
if (this.input.value.length === 0) { return; }
this.state.notes.push({text: this.input.value});
this.setState({ notes: this.state.notes });
this.input.value = "";
}
// BUG - deletes WRONG note!!
deleteNote(note) {
console.log({'DELETE_NOTE': note.text})
// var list = _.clone(this.state.notes);
var list = [...this.state.notes];
var filteredNotes = _.filter(list, function(n) {
return (n.text !== note.text);
})
console.log({
'list': list,
'filteredNotes': filteredNotes
})
this.setState({ notes: filteredNotes });
}
render() {
return (
<div className="row notes-form">
<div className="col-xs-12">
<form onSubmit={this.handleSubmit}>
<input type="text" className="new-note-input" ref={(input) => this.input = input} />
<br />
<button className="add-btn btn btn-info btn-block" type="button" onClick={this.handleSubmit}>Add</button>
<br />
<NotesList notes={this.state.notes} deleteNote={this.deleteNote} />
</form>
</div>
</div>
);
}
}
列表类
class NotesList extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ul className="notes-list">
{this.props.notes.map((n, index) => <NotesListItem key={index} note={n} deleteNote={this.props.deleteNote} />)}
</ul>
);
}
}
列出项目类别
class NotesListItem extends Component {
constructor(props) {
super(props);
this.state = {
'text': props.note.text
};
this.delete = this.delete.bind(this);
}
delete() {
this.props.deleteNote(this.props.note);
}
render() {
return (
<li className="notes-list-item">
<span className="item-text">{this.state.text}</span>
<div className="notes-btn-group btn-group" role="group">
<button className="delete-btn btn btn-danger" type="button" onClick={this.delete}>×</button>
</div>
</li>
);
}
}
最佳答案
尝试使用诸如唯一 ID 之类的内容而不是 index
作为 NotesList
中每个 NotesListItem
的 key
。查看此相关question (实际上可能是重复的):
import React, { Component } from 'react';
import NotesListItem from './NotesListItem';
class NotesList extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ul className="notes-list">
{this.props.notes.map((n, index) => <NotesListItem key={n.id} note={n} deleteNote={this.props.deleteNote} />)}
</ul>
);
}
}
export default NotesList;
您可以使用类似 uuid 的内容生成一个“唯一”id。您可以通过多种方式生成唯一 key ,但这取决于您的数据结构。另外,使用唯一的 id 并根据 id 进行过滤,可以帮助避免数组中的两个注释具有相同文本的情况,因为基于 text
值的过滤会删除它们。
import uuidv1 from 'uuid/v1';
// ...
handleSubmit(e) {
e.preventDefault();
if (this.input.value.length === 0) { return; }
this.state.notes.push({id: uuidv1(), text: this.input.value});
this.setState({ notes: this.state.notes });
this.input.value = "";
}
我只建议使用类似的内容,因为您的文本可能会被重复。您甚至可以使用以下内容来逃脱:
{this.props.notes.map((n, index) => <NotesListItem key={index + n.text} note={n} deleteNote={this.props.deleteNote} />)}
此外,您不应该像 this.state.notes.push({text: this.input.value});
那样直接改变状态。尝试这样的事情:
handleSubmit(e) {
e.preventDefault();
if (this.input.value.length === 0) { return; }
const note = { id: uuidv1(), text: this.input.value };
const notes = [...this.state.notes, note];
this.setState({ notes });
this.input.value = "";
}
此外,我会避免使用 ref
来处理受控输入,尤其是设置值。为什么不创建一个状态属性来结合简单的 onChange
事件处理程序来处理输入的值。这符合 React Forms文档和处理输入值更新的“标准”React 方式:
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) { return; }
const note = { id: uuidv1(), text: this.state.text };
const notes = [...this.state.notes, note];
this.setState({ text: '', notes });
}
render() {
// ...
<input type="text" className="new-note-input" value={this.state.text} onChange={this.handleChange} />
// ...
}
这是一个example行动中。
其他答案可能足以解决您的问题。我建议查看以下内容 article在 React Keys 中提到/链接文档讨论了使用索引作为键的潜在负面影响。
希望有帮助!
关于javascript - React JS 对象集合的状态更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53195536/