I am getting TypeError: Cannot read property 'primeAction' of undefined @line67 (if(this.state.provider[0].primeAction > this.state.......)
I am guessing PrimeScoreCalc is running before state is set in componentDidMount. I tried to place a 'if statement' like below but then this.PrimeScoreCalc() just stops running.
if (this.state.provider>=1){
this.PrimeScoreCalc()
}
My code.
import React, { Component } from 'react'
import axios from 'axios'
export class Quality extends Component {
constructor (props) {
super (props)
this.state = {
primeScore: 0,
netflixScore: 0,
huluScore: 0,
provider:[],
actionMax:'',
animeMax:'',
childrenMax:'',
comedyMax:'',
documentaryMax:'',
horrorMax:'',
musicalMax:'',
romanceMax:'',
scifiMax:'',
thrillerMax:'',
}
this.PrimeScoreCalc = this.PrimeScoreCalc.bind(this);
}
componentDidMount(){
axios.get('http://localhost:8001/provider')
.then(res => this.setState({
provider: res.data
}))
axios.get('http://localhost:8001/provider/actionmax')
.then(res => this.setState({actionMax: res.data}))
axios.get('http://localhost:8001/provider/animemax')
.then(res => this.setState({animeMax: res.data}))
axios.get('http://localhost:8001/provider/childrenmax')
.then(res => this.setState({childrenMax: res.data}))
axios.get('http://localhost:8001/provider/comedymax')
.then(res => this.setState({comedyMax: res.data}))
axios.get('http://localhost:8001/provider/documentarymax')
.then(res => this.setState({documentaryMax: res.data}))
axios.get('http://localhost:8001/provider/horrormax')
.then(res => this.setState({horrorMax: res.data}))
axios.get('http://localhost:8001/provider/musicalmax')
.then(res => this.setState({musicalMax: res.data}))
axios.get('http://localhost:8001/provider/romancemax')
.then(res => this.setState({romanceMax: res.data}))
axios.get('http://localhost:8001/provider/scifimax')
.then(res => this.setState({scifiMax: res.data}))
axios.get('http://localhost:8001/provider/thrillermax')
.then(res => this.setState({thrillerMax: res.data}))
this.PrimeScoreCalc()
}
PrimeScoreCalc () {
let tempScore = 0;
if(this.state.provider[0].primeAction > this.state.provider[0].netflixAction && this.state.provider[0].primeAction > this.state.provider[0].huluAction){
tempScore += (this.props.user.action)
} else {
tempScore+= (this.props.user.action*this.state.provider[0].primeAction/this.state.actionMax)
}
return tempScore
console.log(tempScore)
this.setState({primeScore: tempScore})
}
render() {
console.log(this.props.user)
if (this.state.provider.length==1){
console.log(this.state.provider) //returns [{...}]
console.log(this.state.provider[0].primeAction) //returns 35
console.log(this.state.actionMax) //returns 25
}
return (
<div>
<p>{this.props.user.id}</p>
<p>{this.props.user.id}</p>
<p>{this.props.user.id}</p>
</div>
)
}
}
export default Quality
Basically I want to setState primeScore at componentDidMount based on calculations done in PrimeScoreCalc Function. Any ideas how to solve the problem? Thank you.
Aucun commentaire:
Enregistrer un commentaire