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

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

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

Render（）{
{
data.length>0&&this.state.loading==false？
：null
}
{
data.length==0？
没有找到任何记录
：null
}
}

我的问题是，如果找不到数据但不刷新，则会显示我的消息。 我必须实现这样一个场景-

---

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

这是您描述的一个工作示例。当组件加载时，数据为空，直到API调用在componentDidMount中运行。我模拟了API调用，超时时间为2秒。您需要使用自己的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;

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
类测试扩展了组件{
状态={
加载：false，
数据：[]，
};
componentDidMount（）{
这是apiCall（）；
}
apiCall=（）=>{
this.setState（{loading:true}）；
设置超时（（）=>{
这是我的国家({
加载：false，
数据：['1'，'2'，'3']，
});
}, 3000);
};
render（）{
如果（本状态加载）返回加载。。。；
如果（this.state.data.length==0）返回未找到任何记录；
返回(
找到的记录
);
}
}
导出默认测试；

您可以绑定操作和还原程序数据 这是您想要的示例

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;

import React，{Component}来自'React'；
进口{
文本
看法
尺寸，
平面列表，
滚动视图，
}从“反应本机”；
从'react redux'导入{connect}；
从“../actions/productAction”导入{showLoading，getProducts}；
将*作为进度从“反应本机进度”导入；
类数据扩展组件{
此.state={
产品：[]，
加载：错误
};
组件willmount（）{
this.setState（{loading:true}）；
API调用（）；
}
render（）{
返回(
{this.state.isLoading？
:
无效的
}
{this.state.product.length==0&&
{“无产品”}
}
);
}
}
导出默认数据；

更新条件，如：

data.length==0&&this.state.loading==false？找不到记录：null

我不想使用与reducer存储相关的内容而不是可以使用的道具状态@prashantdexbytes@Hardil维拉尼：我用同样的方法