0

I am creating a simple application having state as following

 const [questions, setquestions] = useState([ {
        id: '1',
        author: 'sarahedo',
        optionOne: {
          votes: ['sarahedo'],
          text: 'have horrible short term memory',
        },
        optionTwo: {
          votes: [],
          text: 'have horrible long term memory'
        }
      },
      {
        id: '2',
        author: 'johndoe',
        optionOne: {
          votes: [],
          text: 'become a superhero',
        },
        optionTwo: {
          votes: ['johndoe', 'sarahedo'],
          text: 'become a supervillian'
        }
      },]

This function updates the state (you don't have the need to understand the complete functionality)

const voteHandler = (id, selectedOption, voter) => {

      questions_copy.filter(singleObject => 
        {if(singleObject.id === id){
          singleObject["optionOne"]["text"] === selectedOption ? singleObject["optionOne"]["votes"].push(voter) : singleObject["optionTwo"]["votes"].push(voter)
          }
        }
      )
      setquestions(questions_copy)
    }

I have sent this function using props to its child component and when this function is called it gives me this error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

As far as calling in the child component (another router) is concerned, I am calling it in this way

const onSubmitHandler = (e) => {
        e.preventDefault()
        props.history.location.data.voteHandler(props.location.state.id, selectedOption, props.location.state.dummyLogin)
        props.history.push("/")
    }

I am simply updating the state, I don't know why it is behaving so

Umar Javed
  • 55
  • 8
  • 4
    This *usually* means the component you are trying to update state of has been unmounted. I see you are doing some very odd things like using JSON to serialize/deserialize your state (a bad practice/anti-pattern), and use an `Array.prototype.filter` to do side-effects (again, a bad practice/anti-pattern, `filter` should be a pure function). Can you provide us a more [Minimal, ***Complete***, and ***Reproducible*** Code Example](https://stackoverflow.com/help/minimal-reproducible-example)? – Drew Reese Apr 02 '21 at 22:53
  • As far as "JSON to serialize/deserialize" is concerned, my state has nested objects, I want to take deep copies. Next operation is filter the object in state based on ID then check if user has selected option 1, add that user name in the votes array, same for the second. How can I fix this error? – Umar Javed Apr 02 '21 at 22:59
  • As far as overview of my App is concerned, I have passed the function 'voteHandler' as props to child component, child component will display a radio button forms where user can select two options (given in state), upon selecting a specific option user name will be added to the 'votes' array in state. But upon submitting the option (when 'voteHandler' is called, it gives this error') – Umar Javed Apr 02 '21 at 23:03
  • It is hard to tell without taking a look into the unmounted component. – seanplwong Apr 03 '21 at 16:06
  • does https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component help you? – seanplwong Apr 03 '21 at 16:06
  • Not the solution: but I wanted to point out that the `filter` function on array is supposed to be used only when you want to get a new, filtered, array and the logic that you're using inside the filter method is not at all relevant to the filter method. So, use `forEach` instead. – Fardeen Panjwani Apr 03 '21 at 20:04

0 Answers0