将类组件更改为功能组件

Question

需要把这个类组件代码改成功能组件，把这个类组件转成功能组件需要做哪些改动。请检查代码以了解更改。我更喜欢使用功能组件，所以我希望将此代码转换为功能组件

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

你来了

// 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>
      )
    
}