在 React Native 中调用 webService 后组件不更新值
Component doesn't update the value after call webService in React Native
我在React Native中调用了GET webService,得到成功响应。但是我想在组件中设置这个响应。它的意思是根据响应组件不更新。看我的代码。
获取请求:
makeRemoteRequest = () => {
this.setState({ loading: true });
fetch('http://jsonstub.com/ws/pendingInvoices', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'JsonStub-User-Key': 'daf0e17a-5951-49e0-8d32-4cb4bb804577',
'JsonStub-Project-Key': '4e70b1a8-12d0-4fa5-8c34-a99b666bd073',
}
})
.then(res => res.json())
.then(res => {
console.log('Data Is : ' ,res);
this.setState({
text : res,
customData : res,
error: res.error || null,
loading: false,
refreshing: false
});
})
.catch(error => {
console.log('error Is : ' ,error);
this.setState({ error, loading: false });
});
};
调用的服务:
componentDidMount() {
this.makeRemoteRequest();
}
想要更新文本和手风琴、
render(){
const { navigate } = this.props.navigation;
return (
<View style = {styles.scrollSty}>
<Accordion
sections={this.state.customData}
renderHeader={this._renderHeader.bind(this)}
renderContent={this._renderContent.bind(this)}
/>
<View><Text style = {{color : 'white'}}>{this.state.text}</Text></View>
</View>
);
}
}
我假设您需要在组件的构造函数中绑定 makeRemoteRequest
方法。
class YourComponent extends Component {
constructor() {
this.makeRemoteRequest = this.makeRemoteRequest.bind(this)
}
componentDidMount() {
this.makeRemoteRequest()
}
render() {
...
}
}
是的。终于得到解决方案:这里我们可以使用两种方式更新组件。
强制更新:设置值后调用函数。
this.setState({
customData: customData,
...
});
this.forceUpdate()
调用 shouldComponentUpdate :如果不调用则不会更新。
shouldComponentUpdate(nextProps, nextState) {
return true;
}
我在React Native中调用了GET webService,得到成功响应。但是我想在组件中设置这个响应。它的意思是根据响应组件不更新。看我的代码。
获取请求:
makeRemoteRequest = () => {
this.setState({ loading: true });
fetch('http://jsonstub.com/ws/pendingInvoices', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'JsonStub-User-Key': 'daf0e17a-5951-49e0-8d32-4cb4bb804577',
'JsonStub-Project-Key': '4e70b1a8-12d0-4fa5-8c34-a99b666bd073',
}
})
.then(res => res.json())
.then(res => {
console.log('Data Is : ' ,res);
this.setState({
text : res,
customData : res,
error: res.error || null,
loading: false,
refreshing: false
});
})
.catch(error => {
console.log('error Is : ' ,error);
this.setState({ error, loading: false });
});
};
调用的服务:
componentDidMount() {
this.makeRemoteRequest();
}
想要更新文本和手风琴、
render(){
const { navigate } = this.props.navigation;
return (
<View style = {styles.scrollSty}>
<Accordion
sections={this.state.customData}
renderHeader={this._renderHeader.bind(this)}
renderContent={this._renderContent.bind(this)}
/>
<View><Text style = {{color : 'white'}}>{this.state.text}</Text></View>
</View>
);
}
}
我假设您需要在组件的构造函数中绑定 makeRemoteRequest
方法。
class YourComponent extends Component {
constructor() {
this.makeRemoteRequest = this.makeRemoteRequest.bind(this)
}
componentDidMount() {
this.makeRemoteRequest()
}
render() {
...
}
}
是的。终于得到解决方案:这里我们可以使用两种方式更新组件。
强制更新:设置值后调用函数。
this.setState({ customData: customData, ... }); this.forceUpdate()
调用 shouldComponentUpdate :如果不调用则不会更新。
shouldComponentUpdate(nextProps, nextState) { return true; }