How to get a data from axios when component mount in react

Question

I'm learning react and I'm a little bit confused about using axios in child component.

So that is what i need get some github repo's last commit and last issue and show it in bootstrap cards.

So I created component to call for github api. When I call the component the error occurs like:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. at cards (http://localhost:3000/static/js/main.chunk.js:649:5)

my child component is like:

constructor(props){
    super(props);
    this.state = {
        isSelected: false,
        lastCommit : null,
        lastIssue : null,
        
    }
    
}

getLastCommit= (repo, owner) => {
    axios
    .get(`https://api.github.com/repos/${owner}/${repo}/commits?per_page=1`)
    .then((result)=>{
        console.log(result.data);
        this.setLastCommit(result.data[0]);
    });
}
setLastCommit=(commit) => {
    this.setState({
        lastCommit : commit
    })
}
getLastIssue=(repo, owner)=>{
    axios
    .get(`https://api.github.com/repos/${owner}/${repo}/issues?per_page=1`)
    .then((result) => {
        this.setLastIssue(result.data[0])
    });
}
setLastIssue= (issue) => {
    this.setState({
        lastIssue : issue
    });
}
// get commit and issues 

// these functions below are functions that add and remove lists. 
onSelectRepo = (e) => {
    const{id, selectRepo} = this.props;
    selectRepo(id);
    
    this.getLastCommit(this.props.repoName ,this.props.Author);
    this.getLastIssue(this.props.repoName ,this.props.Author);
}
onDeleteRepo = (e) => {
    const {id, deleteRepo} = this.props;
    deleteRepo(id);
}

render() {
    const{ lastIssue, lastCommit } = this.state;
    const { repoName, Author, URL, isSelected} =this.props;
    return (
        <div className="m-2">
            <div className="card">
                <div  className="card-header d-flex justify-content-between" >
                    <h6>{repoName}</h6>
                    {
                        isSelected?
                            <button onClick={this.onDeleteRepo} className="btn btn-sm btn-outline-secondary"><i className="fas fa-minus"></i></button>                      
                            :<button onClick={this.onSelectRepo} className="btn btn-sm btn-outline-secondary"><i className="fas fa-plus"></i></button>                      

                        }
                    </div>

<div className="card-body">
                                <p>
                                    <hr/>
                                    <strong>Last Issue:</strong> {lastIssue}  <br/>
                                    <strong>Last Commit: </strong> {lastCommit}
                                </p>

</div>

So i need to get last commit and last issue from github and when component created, that will run.

How can i handle and run this.

Thanks in advance.

Answer 1

You can use the ComponentDidMount() .

Alternatively, if you are using React 16.8+, you can use the useEffect() hooks