javascript - 如何更新我的 isFetching 属性以使 Activity Spinner 正常工作？

Question

我正在从 React native 组件进行异步 API 调用。我想展示我的事件微调器，直到收到回复。 setProps() 函数已弃用。我知道在渲染时我可以从 AddressForm.js 父元素向下传递一个 prop。但是，一旦收到停止 Spinner 的响应，如何更改父元素的状态这是我的代码:

地址格式:

 import React from 'react';
 import { 
 View, 
 StyleSheet, 
 } from 'react-native';

 import { 
 FormLabel, 
FormInput, 
Button,
} from 'react-native-elements'

import InfoButton from './InfoButton';

export default class AddressForm extends React.Component {
constructor(props){
    super(props);
    this.state = {
      line1: '',
      city: '',
      state: '',
      zip: '',
      isFetching: false,
    };
}

handleLine1 = (text) => {
    this.setState({ line1: text })      
}
handleCity = (text) => {
    this.setState({ city: text })
}
handleState = (text) => {
    this.setState({state: text })
}
handleZip = (text) => {
    this.setState({ zip: text })
}

render() {
    return (
        <View style={styles.getStartedContainer}>
            <FormLabel>Address Line 1</FormLabel>
            <FormInput 
                onChangeText={this.handleLine1}
            />
            <FormLabel>City</FormLabel>
            <FormInput 
                onChangeText={this.handleCity}
            />
            <FormLabel>State</FormLabel>
            <FormInput 
                onChangeText={this.handleState}
            />
            <FormLabel>Zip</FormLabel>
            <FormInput 
                onChangeText={this.handleZip}
            />
            <InfoButton // This is the child component
                info={this.state} 
                API_KEY={this.props.API_KEY} 
                isFetching={this.state.isFetching}
            />
        </View>
    )
}

}

这是子组件:

import React from 'react';
import {
View,
ActivityIndicator,
} from 'react-native'

import { 
 Button,
} from 'react-native-elements'


export default class InfoButton extends React.Component {
  constructor(props){
    super(props);
    this.getVoterInfo = this.getVoterInfo.bind(this);
}

getVoterInfo(){
    this.setProps({ isFetching: true}, () => console.log('Fetching Data: ' +this.props.isFetching));
    fetch('https://www.googleapis.com/civicinfo/v2/representatives?key=' + API_KEY + '&address='  + newLine1 + '%20' + newCity + '%20' + newState + '%20')
    .then((data) => {
        results = data.json()
    .then((data) => {
        this.setState({data});
        this.setProps({ isFetching:false });
        console.log(this.state.data);
        console.log('Ended Fetch:' + this.props.isFetching);
        });
    })
    .catch((error) => {
        console.log(error);
    })  
}

componentDidMount(){
    console.log(this.state);
    API_KEY = this.props.API_KEY;
}

componentDidUpdate(){
    //Logic adds '%20' in place of spaces in address fields in order to correctly query the API 
    newLine1 = (this.props.info.line1.split(' ').join('%20'));
    newCity = (this.props.info.city.split(' ').join('%20'));
    newState = (this.props.info.state.split(' ').join('%20'));
    // console.log(newLine1);
}


render() {
    const myButton = 
    <Button
        raised
        icon={{name: 'cached'}}
        title="Get Info"
        onPress={this.getVoterInfo}
    />
    const spinner = <ActivityIndicator size="large" color="#0000ff" />

    return (
        <View>
        {this.props.isFetching === true ? spinner : myButton}
        </View>
    )
}

}

Answer 1

为了实现这一目标，您需要通过 props 将一个函数传递给您的子组件，当您完成子组件中的提取时将调用该函数。

<InfoButton // This is the child component
    info={this.state} 
    API_KEY={this.props.API_KEY}
    onFetchStart={() => {
      this.setState({isFetching: true});
    }}
    onFetchEnd={() => {
      this.setState({isFetching: false});
    }}
/>

我们在这里传递两个函数，以了解何时开始获取以及何时结束。

在 InfoButton 组件中，您所需要做的就是在需要时调用这些函数，例如:

getVoterInfo(){
    this.setState({ isFetching: true});
    this.props.onFetchStart(); // HERE WE TELL OUR PARENT THAT OUR FETCHING HAS STARTED
    fetch('https://www.googleapis.com/civicinfo/v2/representatives?key=' + API_KEY + '&address='  + newLine1 + '%20' + newCity + '%20' + newState + '%20')
    .then((data) => {
        results = data.json()
    .then((data) => {
        this.setState({data, isFetching: false});
        this.props.onFetchEnd(); // HERE WE TELL OUR PARENT THAT OUR FETCHING HAS ENDED
        });
    })
    .catch((error) => {
        console.log(error);
    })  
}

请记住在 InfoButton 组件中使用 this.state.isFetching 而不是 this.props.isFetching!