I have to refresh the page for component did mount to work

Question

I am trying to learn React and am creating a simple web app (using the Visual Studio template provided) where I am trying to access data from the Transport for London API and display the status of the London Underground lines on the page. It works (although admittedly is rather messy pending a refactor!) in terms of getting the data from the API. However, the data from the api does not appear on the page on load. Instead, I need to press refresh in my browser after navigating to the page (via a link from the home page). Here is my code for the front end (I assume the back end is working as the data is successfully coming through - just not when I want it to):

import React, { Component } from 'react';

export class FetchData extends Component {
    constructor(props) {
        super(props);
        this.getData = this.getData.bind(this);
        this.state = {
            lineId: "",
            status: "",
            lineId2: "",
            status2: "",
            lineId3: "",
            status3: "",
            lineId4: "",
            status4: "",
            lineId5:  "",
            status5: "",
            lineId6: "",
            status6: "",
            lineId7: "",
            status7: "",
            lineId8: "",
            status8: "",
            lineId9: "",
            status9: "",
            lineId10: "",
            status10: "",
            lineId11: "",
            status11: ""
        };

    }

    componentDidMount() {
        window.addEventListener('load', this.getData);
    }

    componentWillUnmount() {
        window.removeEventListener('load', this.getData);
    }



    getData(e) {
        //e.preventDefault();
        fetch("api/tube/gettubestatus")
            .then(response => response.json())
            .then(data =>
                this.setState({
                    lineId: data.lineId,
                    status: data.statusSeverityDescription,
                    lineId2: data.lineId2,
                    status2: data.statusSeverityDescription2,
                    lineId3: data.lineId3,
                    status3: data.statusSeverityDescription3,
                    lineId4: data.lineId4,
                    status4: data.statusSeverityDescription4,
                    lineId5: data.lineId5,
                    status5: data.statusSeverityDescription5,
                    lineId6: data.lineId6,
                    status6: data.statusSeverityDescription6,
                    lineId7: data.lineId7,
                    status7: data.statusSeverityDescription7,
                    lineId8: data.lineId8,
                    status8: data.statusSeverityDescription8,
                    lineId9: data.lineId9,
                    status9: data.statusSeverityDescription9,
                    lineId10: data.lineId10,
                    status10: data.statusSeverityDescription10,
                    lineId11: data.lineId11,
                    status11: data.statusSeverityDescription11,
                })
            );

    }

    render() {

        return (
            <div>
                <center>
                    <h1>Tube</h1>

                    <h6>Tube Name</h6>
                    <p>{this.state.lineId}</p>
                    <h6>Status</h6>
                    <p> {this.state.status}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId2}</p>
                    <h6>Status</h6>
                    <p> {this.state.status2}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId3}</p>
                    <h6>Status</h6>
                    <p> {this.state.status3}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId4}</p>
                    <h6>Status</h6>
                    <p> {this.state.status4}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId5}</p>
                    <h6>Status</h6>
                    <p> {this.state.status5}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId6}</p>
                    <h6>Status</h6>
                    <p> {this.state.status6}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId7}</p>
                    <h6>Status</h6>
                    <p> {this.state.status7}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId8}</p>
                    <h6>Status</h6>
                    <p> {this.state.status8}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId9}</p>
                    <h6>Status</h6>
                    <p> {this.state.status9}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId10}</p>
                    <h6>Status</h6>
                    <p> {this.state.status10}</p>
                    <h6>Tube Name</h6>
                    <p>{this.state.lineId11}</p>
                    <h6>Status</h6>
                    <p> {this.state.status11}</p>
                </center>
            </div>
        );
    }
}

I have tried adding the ComponentDidMount/Unmount functions but this hasn't solved the issue. Please can someone point me in the right direction so that the data from the API loads automatically when the page loads, rather than me having to click refresh in the browser?

Answer 1

getData needs to be called in the componentDidMount. Instead you are adding an eventListener to call getData on load of page. By this, getData won't is not getting called.

Just call getData inside componentDidMount instead of adding an event listener

componentDidMount(){
  this.getData()
}

Hope it helps.