Question

嗨我的crud系统删除行动工作正常，但当我在前面按删除看起来没什么事情发生。但我希望当按下移除物品时，在后面立即移除。

我用axios.delete定义一个动作。我没有减速器，因为在我看来他没有为删除定义减速器

这是我的代码

//action
export const REMOVE_BOOK = 'REMOVE_BOOK';
export const removeBook = (id) => {
  const request = axios.delete(`${ROOT_URL}/${id}`);
  return {
    type: REMOVE_BOOK,
    payload: id
  }
};


//bookList component
class BooksList extends Component {
  componentDidMount = () => {
    this.props.fetchBooks();
  };
  
  render() {
    if (!this.props.books) {
      return <div>Loading...</div>
    }
    return (
      <div>
        <Link to='create' className='btn btn-success'> Create new Book</Link>
        <table className='table table-secondary table-hover'>
          <thead>
          <tr className='bg-info text-center'>
            <td>remove</td>
            <td>title</td>
            <td>id</td>
          </tr>
          </thead>
          <tbody>
          {this.props.books.map((book) => {
            return (
              <tr key={book.id} className=' text-center'>
                <td>
                  <button className='btn btn-danger'
                          onClick={() => {
                            this.props.removeBook(book.id);
                          }}
                  >remove
                  </button>
                </td>
                <td>
                  <Link to={`books/${book.id}`}>{book.title}
                  </Link>
                </td>
                <td>{book.id}</td>
              </tr>
            )
          })}
          </tbody>
        </table>

      </div>
    )
  }
}

const mapStateToProps = (state) => {
  console.log('state', state.books.all);
  return {books: state.books.all}
};
export default connect(mapStateToProps, {fetchBooks, removeBook})(BooksList);

Answer 1

您不需要Remove进行//action export const REMOVE_BOOK = 'REMOVE_BOOK'; export const removeBook = (id) => { const request = axios.delete(`${ROOT_URL}/${id}`); return { type: REMOVE_BOOK, payload: id } }; //reducer const booksReducer = (state = {all: []}, action) => { switch(action.type) { ... case REMOVE_BOOK: { const newBooks = state.all.filter(book => book.id !== action.payload) return { ...state, all: newBooks } } ... } }操作，但您需要在书籍缩减器中处理删除操作，例如

$(document).on("submit", "#form-basic-update", function(e){
 e.preventDefault();

 var id = $(this).data('target-id');
 var data = $(this).serializeArray();
 $.ajax({
    type: 'post',
    dataType: 'json',
    data: data,
    url: '/settings/account/public-basic/'+ id,
    success: function(result){

        var text = "You have successfully added your portfolio.";
        var heading = "Success!!";
        successtoast(text,heading);    
        var multikeywords =  $('#keywords').val();
        var arre = multikeywords.replace(/,/g," ");
        $('#public-title').html(`${data[0].value}`);
        $('#public-overview').html(`${data[2].value}`);
        $('#public-service').html(`${data[3].value}`);
       //$('#public-keywords').html(`${data[1].value}`).replace(/,/g,", "); 
        $("span[id='public-keywords']").each(function(){
         $(this).html(arre);   
        });

     }
 });
 });

为什么在列表中删除后我必须手动刷新页面？

1 个答案: