Question

我必须显示一条错误消息“无可用记录”。这是我的情况：-

API Call {
if (data){
loading == false
 }
}

在我的组件中

    Render(){
      {
         data.length > 0 && this.state.loading == false ?
               <Flat List/>
         : null
      }
     {
         data.length==0 ?
               <Text>No Record found</Text>
: null
      }
    }

我的问题是，如果没有找到数据但没有刷新，则会显示我的消息。我必须实现这样的情况-

当我打开或浏览页面时，它的第一个显示为空白，然后加载器启动，如果没有找到数据，则在API调用之后，它们会显示一条消息。

Answer 1

这是您所描述内容的有效示例。加载组件时，数据为空，直到您的API调用在componentDidMount中运行。我模拟了2秒的超时API调用。您需要使用自己的fetch方法在apiCall中关闭setTimeout函数，并在该函数的回调中设置状态

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

class Test extends Component {
  state = {
    loading: false,
    data: [],
  };

  componentDidMount() {
    this.apiCall();
  }

  apiCall = () => {
    this.setState({ loading: true });

    setTimeout(() => {
      this.setState({
        loading: false,
        data: ['1', '2', '3'],
      });
    }, 3000);
  };

  render() {
    if (this.state.loading) return <Text>Loading...</Text>;
    if (this.state.data.length === 0) return <Text>No records found</Text>;

    return (
      <View>
        <Text>Records found</Text>
      </View>
    );
  }
}

export default Test;

Answer 2

您可以绑定动作和减速器数据这是您想要的示例

import React, { Component } from 'react';
import {
    Text,
    View,
    Dimensions,
    FlatList,
    ScrollView,
} from 'react-native';
import { connect } from 'react-redux';
import {showLoading, getProducts} from '../actions/productAction';
import * as Progress from 'react-native-progress';

class Data extends Component {



    this.state = {
        product: [],
        loading: false
    };

    componentWillMount() {
        this.setState({loading: true});
        API CALL();
    }


    render() {
        return (
            <View>

                {this.state.isLoading ?
                    <View>
                        <Progress.CircleSnail thickness={5} size={55} color={['#000000', '#000000', '#FFFFFF',]} />
                    </View>
                    :
                    null
                }

                {this.state.product.length === 0 && <View>
                    <Text>{"NO PRODUCT"}</Text>
                </View>}

                <FlatList
                    data={this.state.product}
                />

            </View>
        );
    }
}



export default Data;

在React Native中处理空错误消息的最佳方法是什么？

2 个答案: