Question

我正在努力制作一个todo应用程序。但它保持双重发布。我做了一个编辑功能，然后它保持双重发布。我遵循了指南的例子。但我找不到错误。

   <!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>

Answer 1

在我看来，您无法跟踪您是在编辑现有项目还是添加新项目。

如果您正在进行编辑，则需要跟踪哪一个，然后替换它或在您的状态下更新它，否则附加到列表中。您只是追加，因此您的应用始终认为正在添加新的应用，因此它看起来像是双重发布，但它实际上是添加了一个恰好有更新文本的全新商品。

另一种选择是调用删除然后编辑，这将产生相同的效果。

反应代码中的双重帖子

1 个答案: