在反应代码中重复发布
[英]Double post in react code
问题描述
I am trying to make a todo app in react. 
我正在尝试做一个待办事项应用程序。 But it keeps double posting. 但它会重复发布。 I made an edit function and after that it keeps double posting. 我做了一个编辑功能，此后它一直保持两次发布。 I have followed the example of the guide. 我遵循了指南的示例。 But I can not find the error. 但是我找不到错误。
<!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
It looks to me like you aren't tracking whether you are editing an existing item or adding a new one. 在我看来，您没有跟踪是在编辑现有项目还是添加新项目。
If you're editing, then you need to track which one, then replace it or update it in your state, otherwise append to the list. 如果要编辑，则需要跟踪哪一个，然后以您的状态对其进行替换或更新，否则将其追加到列表中。 You're just appending, so your app always thinks a new one is being added and hence it looks like it's double posting, but it is actually adding a brand new item that happens to have updated text. 您只是在追加内容，因此您的应用程序始终认为正在添加一个新商品，因此看起来好像是重复发布，但实际上是在添加一个恰好具有更新文本的全新商品。
The other option is to call delete and then edit, which will have the same effect. 另一种选择是调用删除然后编辑，这将具有相同的效果。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.