How do I resolve unmounted component error

Question

I’ve recently started learning react and am now building a very simple game, but have hit an issue I can’t seem to solve.

At the end of the game, I want to display a scoreboard. This should pull in the top ten scores from a JSON file, add in the current users score (which I’ve defined via a constant temporarily for now) and then sort and display the results.

My problem is when running my code I get a “can’t perform a react state update on an unmounted component” error. If I check the console logs then the merge & sorting of users & scores seems to be fine. I can’t work out what the problem is.

import React from 'react';
import Scoreline from './Scoreline';

let currentuser = {
  name: "nametest51",
  score: 42,
  date: "2022-01-20",
  saved: false
}

class Scoreboard extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      users: [],
      currentuser: [],
    }
  }

componentDidMount() {
  this.setState({currentuser: currentuser});
  fetch('./datasb.json')
  .then(res => res.json())
  .then((data) => { 
    this.setState({users: data});
    this.scorelist();
});
}

scorelist = () => {
const array = this.state.users.concat(this.state.currentuser);
console.log(array);
const array1 = array.sort((firstItem, secondItem) => secondItem.score - firstItem.score);
this.setState({users: array1});
console.log(this.state.users);
}

display = () => {
this.state.users.map((user, i) => {
          return (
            <div>
              <Scoreline 
                key={i}
                name={user[i].name}
                score={user[i].score}
                date={user[i].date}
                saved={user[i].saved}
                />
                </div>
        );}
      )
  }

render () {
  return (
      <div>
      {this.display()}
      </div>
    );
  }
}

  export default Scoreboard; 

Answer 1

You are trying to set some state after component unmount.There are some issue which I can see in your code. 1 issue can be you are not returning anything from your display function. You need to add return before this.state.users.map. 2nd issue which is while mapping user array you don't have to use the index because it is giving every single object in users array so instead of name={user[i].name} to name={user.name}

display = () => {
return this.state.users.map((user, i) => {
          return (
            <div>
              <Scoreline 
                key={i}
                name={user.name}
                score={user.score}
                date={user.date}
                saved={user.saved}
                />
                </div>
        )}
      )
  }

Preferably, we should not use key as index key={i} if you do have id with user object, you should id or any property in user object which is unique through out all the users array. Also, you cannot use con