在反应代码中重复发布
[英]Double post in react code
问题描述
我正在尝试做一个待办事项应用程序。 但它会重复发布。 我做了一个编辑功能，此后它一直保持两次发布。 我遵循了指南的示例。 但是我找不到错误。
<!DOCTYPE html>
<html>
<head>
<title>EASY SHIT</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<style>
body{
margin-top:30px;
}
a.delete{
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="app"></div>
</div>
</div>
</div>
<script type="text/babel">
var App = React.createClass({
getInitialState: function (){
return{
text: '',
isEdit: 0,
todos:[
{
id: 1,
text: 'meeting at work'
},
{
id: 2,
text: 'Walk the dog'
},
{
id: 3,
text: 'Eat candy'
}
]
}
},
render: function(){
return(
<div>
<TodoForm
{...this.state}
changeText={this.handleChangeText}
onTodoUpdate={this.handleTodoUpdate}
onTodoAdd={this.handleTodoAdd} />
<TodoList
{...this.state}
editTodo={this.handleTodoEdit}
deleteTodo={this.handleTodoDelete}/>
</div>
)
},
handleTodoAdd: function(text){
var newTodo = {
id: this.state.todos.length + 1,
text: text
}
this.setState({todos: this.state.todos.concat(newTodo)});
},
handleTodoDelete: function(todo){
var todos = this.state.todos;
for(var i = 0;i <todos.length; i++) {
if(todos[i].id == todo.id){
todos.splice(i, 1);
}
}
this.setState({todos: todos});
},
handleTodoEdit: function(todo){
this.setState({
text: todo.text,
isEdit: todo.id
});
},
handleChangeText: function(text){
this.setState({text: text});
},
handleTodoUpdate: function(todo){
var todos = this.state.todos;
for(var i = 0;i <todos.length; i++) {
if(todos[i].id == todo.id){
todos.splice(i, 1);
}
}
todos.push(todo);
this.setState({todos: todos});
}
});
var TodoForm = React.createClass({
render: function(){
return(
<div>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Todo text</label>
<input type="text" ref="text" value={this.props.text} onChange={this.onChange} className="form-control" />
</div>
</form>
</div>
)
},
onChange: function(e){
this.props.changeText(e.target.value);
},
onSubmit: function(e){
e.preventDefault();
var text = this.refs.text.value.trim();
if(!text){
alert('Please enter something');
return;
}
if(this.props.isEdit){
var updatedTodo = {
id:this.props.isEdit,
text: text
}
this.props.onTodoUpdate(updatedTodo);
} else {
this.props.onTodoAdd(text);
}
this.props.onTodoAdd(text);
this.refs.text.value= '';
}
});
var TodoList = React.createClass({
render: function(){
return(
<ul className="list-group">
{
this.props.todos.map(todo => {
return <li className="list-group-item" todo={todo} key ={todo.id}>
<span onClick={this.editTodo.bind(this, todo)}> {todo.text}</span> <a onClick={this.OnDelete.bind(this, todo)}className="delete" href="#">x</a></li>
})
}
</ul>
)
},
OnDelete: function(todo){
this.props.deleteTodo(todo);
},
editTodo: function(todo){
this.props.editTodo(todo);
}
});
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</body>
</html>
1 个解决方案
解决方案1
1 2016-04-15 22:19:38
在我看来，您没有跟踪是在编辑现有项目还是添加新项目。
如果要编辑，则需要跟踪哪一个，然后以您的状态对其进行替换或更新，否则将其追加到列表中。 您只是在追加内容，因此您的应用程序始终认为正在添加一个新商品，因此看起来好像是重复发布，但实际上是在添加一个恰好具有更新文本的全新商品。
另一种选择是调用删除然后编辑，这将具有相同的效果。
反应中 setState 代码的奇怪双重执行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.