"Child already has a Parent, it must be Removed first" when sending new object to Reducer

Asked

Viewed 86 times

4

I have a table where I want to sort your data.

The table is copulated through the values of this useSelector()

const users = useSelector(state => state.userStates.users)

When the user clicks on one of the table columns, I send it to the function sortBy() the key I will command:

<TableCell onClick={() => sortBy('login')}>Email</TableCell>

And then my function performs the ordination:

const sortBy = (key) => {
    // If is using a field different by the last, starts ordering in asc
    if (key !== orderingField) {
        setOrderingStatus('asc')
        setOrderingField(key)
    // Reverte a ordenação
    } else { 
        if (orderingStatus === 'asc') {
            setOrderingStatus('desc')
        } else {
            setOrderingStatus('asc')
        }
    }
    let copyUsers = {}
    copyUsers.data = [...users] // make a copy of the obj
    copyUsers.lastPage = JSON.parse(JSON.stringify(lastPage)) // copy of the last page 
    copyUsers.data.sort(compareValues(orderingField, orderingStatus)) // make the sort)
    dispatch(userActions.setUserList(copyUsers))
}

export default function compareValues(key, order = 'asc') {
    return function innerSort(a, b) {
      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
        // property doesn't exist on either object
        return 0;
      }

      const varA = (typeof a[key] === 'string')
        ? a[key].toUpperCase() : a[key];
      const varB = (typeof b[key] === 'string')
        ? b[key].toUpperCase() : b[key];

      let comparison = 0;
      if (varA > varB) {
        comparison = 1;
      } else if (varA < varB) {
        comparison = -1;
      }
      return (
        (order === 'desc') ? (comparison * -1) : comparison
      );
    };
}

The data is being sorted correctly through this function, however, when I perform the dispatch() of that object I get several errors:

Child already has a Parent, it must be Removed first. nbind.js:9812 Uncaught abort() at Error

I believe it is something in the copy of the object users that is the problem, but I still can not understand what is happening and how to solve.

copyUsers.data = [...users] // Funciona
copyUsers.data = JSON.parse(JSON.stringify(users)) // Da o erro
copyUsers.data = [...users] // Da o erro
react redux

  • The code calls in the search the dispatch, really weird.

  • @Virgilionovic for what I debugged, if I order the copyUsers.data object = [...users] copied in this way, he gives this error, the same happens if I try with JSON.parse(JSON.stringify()) and other methods that copy the object. I had to pass the object without copy, and then it worked.

  • I’d really like to understand why this is happening.

  • copyUsers.data = [...users] // make a copy of the obj, shouldn’t be copyUsers.data = {...users]}// make a copy of the obj

  • @Virgilionovic doesn’t think so, because the users object is an array, if I put {...users} it puts my users inside another object, when I print console.log(copyUsers.data) I have the object array as expected, he even draws lots, but when I tell him to make that mistake.

2 answers

0

Maybe the problem is that when copying objects, you are not creating new objects, but creating a new array with references to the same objects that were in the old array users.

Try to use something like copyUsers.data = users.map(user => ({...user})) to actually make a copy of the objects.

-4

I’m not really into the subject of Redux, but supposedly the error that occurs to you isn’t because in your HTML you’re calling an object in the click function?

Your code is like this:

<TableCell onClick={() => sortBy('login')}>Email</TableCell>

and it shouldn’t be something like this?

<TableCell onClick="sortBy('login')">Email</TableCell>

I may be wrong, but I hope I can help.

  • 1

    This is not HTML. It’s JSX, the property onClick (prop) is valid. I don’t think this will answer the question...

  • Function call is being done normally. That’s not the problem

Browser other questions tagged react redux

You are not signed in. Login or sign up in order to post.