Javascript 如何更新iFetching道具以使活动微调器工作？

我正在从React本机组件进行异步API调用。我想展示我的活动微调器，直到我得到回复。setProps（）函数已弃用。我知道在渲染时可以从AddressForm.js父元素传递一个道具。但是，一旦得到停止微调器的响应，我如何更改父元素的状态？下面是我的代码：

地址表格：

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

从“React”导入React；
导入{
看法
样式表，
}从“反应本机”；
导入{
FormLabel，
FormInput，
按钮
}来自“反应本机元素”
从“/InfoButton”导入InfoButton；
导出默认类AddressForm扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
第1行：“”，
城市：''，
声明：''，
zip:“”，
isFetching:false，
};
}
handleLine1=（文本）=>{
this.setState（{line1:text}）
}
处理能力=（文本）=>{
this.setState（{city:text}）
}
扶手状态=（文本）=>{
this.setState（{state:text}）
}
handleZip=（文本）=>{
this.setState（{zip:text}）
}
render（）{
返回(
地址行1
城市
状态
拉链
)
}

}

下面是子组件：

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

从“React”导入React；
进口{
看法
活动指示器，
}从“反应本机”
导入{
按钮
}来自“反应本机元素”
导出默认类InfoButton扩展React.Component{
建造师（道具）{
超级（道具）；
this.getVoterInfo=this.getVoterInfo.bind（this）；
}
getVoterInfo（）{
this.setProps（{isFetching:true}，（）=>console.log（'Fetching Data:'+this.props.isFetching））；
取（'https://www.googleapis.com/civicinfo/v2/representatives?key=“+API_KEY+”&地址=”+newLine1+“%20”+newCity+“%20”+newState+“%20”）
。然后（（数据）=>{
结果=data.json（）
。然后（（数据）=>{
this.setState（{data}）；
this.setProps（{isFetching:false}）；
console.log（this.state.data）；
console.log（'end Fetch:'+this.props.isFetching）；
});
})
.catch（（错误）=>{
console.log（错误）；
})  
}
componentDidMount（）{
console.log（this.state）；
API_KEY=this.props.API_KEY；
}
componentDidUpdate（）{
//逻辑添加“%20”以代替地址字段中的空格，以便正确查询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（）{
常量myButton=
常数微调器=
返回(
{this.props.isFetching==true？微调器：myButton}
)
}

---

}

为了实现这一点，您需要通过道具将函数传递给子组件，当您完成子组件的获取时，将调用道具

<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组件中使用

this.state.isFetching

而不是

this.props.isFetching

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