javascript - 如何更新isFetching Prop 以使Activity Spinner工作？

我正在从React本机组件进行Async 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>
    )
}

}

这是子组件：

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

}

最佳答案

为了实现这一点，您需要通过prop将函数传递给子组件，当您完成子组件的提取操作时，该函数将被调用。

<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！

关于javascript - 如何更新isFetching Prop 以使Activity Spinner工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53458742/