[英]Changing class component to functional component
需要将此 class 组件代码更改为功能组件,将此 class 组件转换为功能组件需要进行哪些更改。 请检查代码以了解更改。 我更喜欢使用功能组件,所以我希望将此代码转换为功能组件
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>
)
};
}
给你
// 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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.