Как обрабатывать удаление спама в ReactJs - PullRequest
Новая
       40

Как обрабатывать удаление спама в ReactJs

0 голосов
/ 07 ноября 2018

У меня есть список предметов, у каждого из которых есть корзина (например, кнопка удаления). Поскольку существует так много возможных результатов, я отображаю 25 результатов, а затем отображаю остальные страницы (когда пользователь нажимает кнопку следующей страницы в это время, я получаю следующие результаты).

Однако проблема, с которой я сталкиваюсь, заключается в том, что, как только они удаляют элемент, если в базе данных все еще есть элементы, я хочу получить их следующий элемент.

Таким образом, 30 элементов принадлежат этому пользователю, они видят 25, и если они удаляют один, следующий элемент (элемент 26) извлекается из базы данных и отображается.

Я не думаю, что это будет трудно для достижения проблемы, если они хотят удалить 5 предметов и щелкать друг за другом, я боюсь, что произойдет гонка, и вместо того, чтобы тянуть вещь 26, вещь 27, вещь 28, вещь 29 , item30, он может тянуть item26 x 5.

Единственная идея, которую я могу придумать, заключается в том, что я вытягиваю больше, чем показываю, если я показываю 25 записей, я вытягиваю 35 записей, а затем продолжаю наполнять эту корзину после удаления каждой из них.

Однако я не уверен, как бы я пополнил корзину дополнений и сценариев о том, как справиться, если не хватает предметов для пополнения корзины.

Я использую Reactjs, Mobx и Mobx State Tree.

У меня пока нет кода, так как я понятия не имею, в какую сторону идти.

1 Ответ

0 голосов
/ 07 ноября 2018

Вот что я бы сделал:

  1. Создать массив в состоянии для хранения удаляемых в данный момент элементов
  2. В моей функции удаления Проверьте, удаляется ли элемент в данный момент
  3. Если удаляется, ничего не делать
  4. Если нет, добавьте элемент в массив, вызовите axios.delete (), а затем удалите элемент из массива 

class PreventSpam extends React.Component {
  constructor(props){
    super(props);
    //Example data
    const exampleList = [{id: 1, name: "One"},
                         {id: 2, name: "Two"},
                         {id: 3, name: "Three"},
                         {id: 4, name: "Four"}]
    //State of the current component
    this.state={
      Deleting: [],
      items: exampleList
    }
    
    this.deleteItem = this.deleteItem.bind(this);
    this.loadNext = this.loadNext.bind(this);
  }
  
  deleteItem(item){
     //Remove element from my state
     let newItems = this.state.items.filter(it=> it.id !== item.id);
     this.setState({
     		items: newItems
     });
     
     //If this items is currently being deleted, return;
     if(this.state.Deleting.indexOf(item.id) !== -1){
     	 console.log("wait for this deletion to complete")
       return;
     }
     
     //Add the item to the deleting array
     this.setState((state,props)=> ({
       Deleting: [...state.Deleting, item.id]
     }));
     
     //call delete with axios
     axios.delete(`url/${item.id}`).then(()=>{
     			//Delete successful, update the deleting list
          let newDeleting = [...this.state.Deleting];
          let deletedIndex = newDeleting.indexOf(item.id);
          newDeleting.splice(deletedIndex, 1);
          this.setState({Deleting: newDeleting});
   				
          
          //Load next item
   				loadNext();
     }).catch(error => {
     			//Opt 1: add the item back to the state on error
          //Opt 2: alert the user
          //Opt 3: ?????
     })
  }
  
  //Loads the 25th or last item on the database
  loadNext(){
    axios.get("apiCall").then(response => {
      let newItem = response.data;
    });
  }
  render() {
    const {items} = this.state;
    return (<div>
      <table>
         <tbody>
           {items.map((item,index)=>{
             return (
               <tr key={index}>
                 <td>{item.id}</td>
                 <td>{item.name}</td>
                 <td><button onClick={() => this.deleteItem(item)}>Delete</button></td>
               </tr>
             )
            })
           }
        </tbody>
      </table>
      
    </div>);
  }
}

ReactDOM.render(
  <PreventSpam  />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>
...