reactjs - 在 React Native 中调用 webService 后组件不更新值

Question

我在 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>
        );
     }
    }

Answer 1

是的。最后得到解决方案：这里我们可以使用两种方式更新组件。

1. 强制更新：设置值后调用函数。

     this.setState({
        customData: customData,
        ...
      });
      this.forceUpdate()
   

2. 调用 shouldComponentUpdate ：如果您不调用，则不会更新。

     shouldComponentUpdate(nextProps, nextState) {
       return true;
     }
   

Answer 2

我假设您需要makeRemoteRequest在组件的构造函数中绑定您的方法。

class YourComponent extends Component {
  constructor() {
    this.makeRemoteRequest = this.makeRemoteRequest.bind(this)
  }

  componentDidMount() {
    this.makeRemoteRequest()
  }

  render() {
    ...
  }
}