Rest operator for deleting property in object not working, in react component?

我怕爱的太早我们不能终老 提交于 2021-01-29 19:51:58

问题


I'm running into a bug where I use the spread operator to delete an object property. I tested the code in the console and it works there but I'm unclear why it's not working in my React App. Here's my other question for reference and now I'm using the accepted answer's code line by line: https://stackoverflow.com/questions/64000577/rest-operator-to-omit-properties.

I followed the entire debug path in the Source tab using breakpoint. I get inside the if statement and when it's time to destructure state, the value of removedBooks from ...removedBooks still has entry 345. If the destructure had occurred correctly, the object property for 345 would no longer be in removedBooks. This is where my bug is. I really hope I'm not making another silly mistake with nesting. I added the rest of code for context, just in case there are some unintended side effects.

      handleBookRestore(book){
            axios
            .patch(
                `/api/books/${book.id}/listings/${book.listingIds[0]}/restore`
            )
            .then(response => {
                console.log(response);
                //After successful restore, we remove the first listingId in the
                // list of corresponding listings for that removed book.
                //IF there was only one listingID left, then remove the book.
                this.setState(
                    state => {
                        const listingIds =
                            state.removedBooks[book.id].listingIds;

                        if (listingIds.length == 1) {
                            const {
                                removedBooks: { [book.id]: data, ...removedBooks }
                            } = state;
                            return { ...state, removedBooks };
                        } else {
                            return {
                                ...state,
                                removedBooks: {
                                    ...state.removedBooks,
                                    [book.id]: {
                                        ...book,
                                        listingIds: listingIds.slice(1)
                                    }
                                }
                            };
                        }
                    },
                    () => {
                        this.props.onNotificationUpdate({
                            type: "book_restore_success",
                            data: { title: book.title }
                        });
                    }
                );
            });
         }

Relevant values at code run time

state = {
  "345": {
    "id": 345,
    "title": "Among the Thugs",
    "listingIds": [
      2065
    ]
  },
  "1581": {
    "id": 1581,
    "title": "American Gothic",
    "listingIds": [
      1320
    ]
  }
}

book = {
  "id": 345,
  "title": "Among the Thugs",
  "listingIds": [
    2065
  ]
}

来源:https://stackoverflow.com/questions/64002070/rest-operator-for-deleting-property-in-object-not-working-in-react-component

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!