ActivityIndi​​cator抛出未定义类型错误不是对象

Question

我正在从事React本机项目。我想做的是在获取数据时在屏幕上渲染Spinner（ActivityIndi​​cator）。以这种形式运行时。

state = {
    audios: '',
    isLoading: true
}


render() {

    if (this.state.isLoading) {
        return <ActivityIndicator
            style={{ flex: 1, justifyContent: 'center', backgroundColor: 'white' }}
            animating={true}
            color='#1b92e7'
            size='large'
        />;
    }

但是ActivityIndi​​cator包装了我的TopBar组件。我想在TopBar下使用它。当我尝试渲染此图像时，会抛出“类型错误undefined”不是对象。

state = {
    audios: '',
    isLoading: true
}

componentDidMount() {
    xmls = 'my envelope';
    Axios.post('url to get data', xmls, {
        headers: {
            'Authorization': 'key',
            'Content-Type': 'text/xml',
        }
    }).then(response => {
        this.setState({ audios: response.data, isLoading: false });
    }).catch(err => {
        console.warn("Error", err);
    });
}

removeJsonTextAttribute = (value, parentElement) => {
    try {
        var keyNo = Object.keys(parentElement._parent).length;
        var keyName = Object.keys(parentElement._parent)[keyNo - 1];
        parentElement._parent[keyName] = value;
    }
    catch (e) { }
}

indicator = () => {
    return <ActivityIndicator
        style={{ flex: 1, justifyContent: 'center' }}
        animating={true}
        color='#0da24d'
        size='large'
    />
}

render() {

    let isLoading = this.state.isLoading;

    let convert = require('xml-js');

    const options = {
        compact: true,
        ignoreDeclaration: true,
        spaces: 4,
        ignoreAttributes: true,
        textFn: this.removeJsonTextAttribute,
        elementNameFn: function (val) { return val.replace('SOAP-ENV:', '').replace('ns:', ''); }
    }

    let audio = convert.xml2json(this.state.audios, options);
    let audio_obj = JSON.parse(audio); // it throws error in here.
    let url= audio_obj.Envelope.Body.url;

    return (
        <View style={{ flex: 1 }}>
            <TopBar name={"Name"}  />
            <Spinner loading = {isLoading}>
            <WebView
                startInLoadingState={true}
                renderLoading={this.indicator}
                allowsInlineMediaPlayback={true}
                source={{ uri: url}}
                onError={() => {
                    ToastAndroid.showWithGravity(
                        'Error while getting url.',
                        ToastAndroid.LONG,
                        ToastAndroid.CENTER,
                    );
                }}
            />
            </Spinner>

        </View >
    );
}

这是我的微调组件；

const withSpinner = Component => ({loading, children, ...props}) => {
    if (loading) {
        return <ActivityIndicator 
            style={{ flex: 1, justifyContent: 'center', backgroundColor: 'white'}}
            animating={true}
            color= 'red'
            size='large'
        />;
    } else {
        return (
           <Component {...props}>
               {children}
           </Component>
        )
      }
    };

这是文章Higher Order Component Spinner

我在这里想念什么？我希望你们能帮助我。非常感谢。

Answer 1

我认为您的微调框应该是

const Spinner = withSpinner(View);

代替WebView