Need help with componentWillReceiveProps of react

Need help with componentWillReceiveProps of react
0

#1

Hello everyone!

I’m currently trying to learn react and redux and I’m doing it by remaking one of the projects I made with PHP(http://whattodraw.tk/ if you want to understand what I’m trying to do).

To do this, I made an API that give me a random word from the database and takes all the words already seen so that it doesn’t send the same word more than one time. When I receive a word I change the URL so that the same word can be accessed with this URL. The URL is only changed in “componentWillReceiveProps” when the id provided in the URL is different than the current word id. It works the way it should until I’ve seen all the words, at this point I receive a word with the id “0”. When I receive that last word, the condition in “componentWillReceiveProps” is always entered even if the id in the URL is “0” and the id of the received word is also “0” so I get an error “Maximum call stack size exceeded”

A normal word is received like that:
{"idMot": 415, "mot": "dragon" }
and the last word like that:
{"idMot": 0, "mot": "No more words"}

class CurrentWord extends Component{
  componentWillMount(){
    const { wordId } = this.props.match.params
   
    //if there's no words seen, the page is accessed directly so we get the specific word
    if(!this.props.words.length){
      this.props.getSpecificWord(wordId)
    }
  }

  nextWord(){
    //you call the API with all the words seen, if there's no more words in the database
   // you receive a word called "No more words" with the id "0"
    this.props.getWord(this.props.words.map((word) => word.mot))
  }

  componentWillReceiveProps(nextProps){
      const { wordId } = this.props.match.params

      //The problem is here, this condition works until I get to the "No more words" word
      //When I get to the "No more words" word, the condition is entered even if wordId(the id in the url) is the same as nextProps.words[0].idMot
      //I access words[0] because the new word is always added at the start of the array
      if(wordId !== nextProps.words[0].idMot){
        console.log(wordId + " " + nextProps.words[0].idMot) //will log "0 0" on the last word
        this.props.history.push(`/word/${nextProps.words[0].idMot}`)
      }
  }

  render(){
    if(!this.props.words.length){
      return (<div>Loading</div>)
    }

    return (
      <div>
        <div id="word">
          {this.props.words[0].mot}
        </div>

        <button onClick={this.nextWord.bind(this)}>next</button>
      </div>
    )
  }
}

function mapStateToProps(state){
  return { words: state.words }
}

would anyone have a lead on why that condition is always entered on the last word?


#2

What is wordId? Where does it come from. I’m not sure what this.props.match is. Where is that defined? Is it possible wordId is actually ‘0’ (string) instead of 0 (num) so the identity operator (!==) is failing? Maybe try equality (!=) instead just to see what happens?


#3

oh god, I knew it was something stupid. Since I was taking the id of the words I tought it should always be a number and nothing else. “this.props.match.param” are the variables passed in the URL and since it’s from the URL “wordId” is a string. The id of all the words are from a database so they are also taken as strings, but when there’s no more words in the database, I manually assign the id 0 as a number since I thought they were all supposed to be numbers :expressionless:

So that was the problem, thanks a lot :smile: