mardi 17 mars 2020

React State - Cannot read property ' ' of undefined

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