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?