将 class 组件更改为功能组件

Question

Need to change this class component code into functional component, what are the required changes for converting this class component to functional component. Please check the code for the changes. I am more into using functional components, so I want this code to be converted to functional component

class MTS extends React.Component {
constructor(props) {
        super(props);
        this.state = {
            message:null,
            msgStatus: null,
            version :null ,
            data: [],
            clusters:null           
        };
       this.receiveData = this.receiveData.bind(this);  
         
    }
    //************************************************************************ 
    onGetAPI=()=>{
        var _self = this;
        fetch('http://127.0.0.1/api/v1/version')
        .then(response =>
        {
            this.setState({ msgStatus : response.status, strStatusText : response.statusText }) //  console.log(this.msgStatus) ;
            return response.json();
         })
        .then(data => this.setState({ version : data }))
        .then(function(json) {
            console.log(json);
            _self.receiveData(json);
          });     
    }
    //*************************************************************************
    onGetClusters=()=>{
        <label>Cluster ID <input style={{backgroundColor: "lightgray"}} type = "textarea" ref ="input"></input></label>

        var _self = this;
        fetch('http://127.0.0.1/api/v1/clusters')
        .then(response =>
        {
            this.setState({ msgStatus : response.status , strStatusText : response.statusText}) //  console.log(this.msgStatus) ;
            return response.json();
         })
        //.then(data => this.setState({ clusters : data })
        .then(function(json) {
            console.log(json);
            _self.receiveData(json);
          }  );
    }
     //*************************************************************************
    receiveData(data) {
        this.setState({data});
    }
     //*************************************************************************
    onGetClustersID=()=>{
        var _self1 = this;
        let clusterinfo = this.refs.input.value;
        //let clusterinfo1 =JSON.parse(clusterinfo);
        console.log(clusterinfo);

        fetch(' http://127.0.0.1/api/v1/clusters/'+ clusterinfo)
        .then(response =>
            {
                this.setState({ msgStatus : response.status, strStatusText : response.statusText }) //  console.log(this.msgStatus) ;
                return response.json();
             })
            //.then(data => this.setState({ clusters : data })
            .then(function(json) {
                console.log(json);
                _self1.receiveData(json);
              }  );
    }
     render(){
     return(
        <h4>Response status : {this.state.msgStatus} {this.state.strStatusText}</h4>
            <h4> Output :  {JSON.stringify(this.state.data)}</h4>
      )
      };
    }

Answer 1

Here you are

// 1. create a function called MTS
import { useState } from 'react'

const MTS = () => {
    // 2. using `useState`
    const [state, setState] = useState({
            message:null,
            msgStatus: null,
            version :null ,
            data: [],
            clusters:null           
        })

     // 3. convert all method to lambda function
     // remove var _self = this;
     // replace this.setState => setState
     // replace _self.receiveData => receiveData
    const onGetAPI = ()=> {
        fetch('http://127.0.0.1/api/v1/version')
        .then(response =>
        {
            setState({ msgStatus : response.status, strStatusText : response.statusText }) //  console.log(this.msgStatus) ;
            return response.json();
         })
        .then(data => setState({ version : data }))
        .then(function(json) {
            console.log(json);
            receiveData(json);
          });     
    }
    
    const receiveData = (data) => {
        setState({data});
    }
    
    const onGetClusters = () => {
        <label>Cluster ID <input style={{backgroundColor: "lightgray"}} type = "textarea" ref ="input"></input></label>

        fetch('http://127.0.0.1/api/v1/clusters')
        .then(response =>
        {
            setState({ msgStatus : response.status , strStatusText : response.statusText}) //  console.log(this.msgStatus) ;
            return response.json();
         })
        
        .then(function(json) {
            console.log(json);
            receiveData(json);
          }  );
    }
    
    const onGetClustersID = () => {
        
        // let clusterinfo = this.refs.input.value;
        // let clusterinfo1 =JSON.parse(clusterinfo);
        console.log(clusterinfo);

        fetch(' http://127.0.0.1/api/v1/clusters/'+ clusterinfo)
        .then(response =>
            {
                setState({ msgStatus : response.status, strStatusText : response.statusText })
                return response.json();
             })
            
            .then(function(json) {
                console.log(json);
                receiveData(json);
              }  );
    }
    
    
    return (
        <h4>Response status : {state.msgStatus} {state.strStatusText}</h4>
            <h4> Output :  {JSON.stringify(state.data)}</h4>
      )
    
}