Javascript 条件if-else在react中列出数据_Javascript_Reactjs_Conditional Statements_Fetch_Native

Javascript 条件if-else在react中列出数据

javascript reactjs

Javascript 条件if-else在react中列出数据,javascript,reactjs,conditional-statements,fetch,native,Javascript,Reactjs,Conditional Statements,Fetch,Native,我有json数据，列表上也有。这里我想使用一个空的数据批准条件但我没有成功： componentDidMount(){ this.getJson(); } getJson= () => { const url = `https://example.com/priceon?ori=${a}&des=${b}` fetch(url) .... }; render() { //he

我有json数据，列表上也有。这里我想使用一个空的数据批准条件

但我没有成功：

   componentDidMount(){
        this.getJson();
    }

 getJson= () => {

        const url = `https://example.com/priceon?ori=${a}&des=${b}`
        fetch(url)
          ....
    };

render() {
    //here I make a condition if the data exists and does not exist
    if (this.state.results == '') {
        return(
        <View>
            <Text style={{fontWeight:'bold',fontSize:16}}>DATA NULL</Text>
        </View>
        );
    } else {
        return (
        <Container style={styles.container}>
                    <List 
                        keyExtractor = {(item, index)=> index.toString()} 
                        dataArray={this.state.results}
                        renderRow={(results) =>
                        <ListItem>
                            <Body>
                                <CardItem>
                                    <Text>{results.tipe} - {results.service}</Text>
                                </CardItem>
                            </Body>
                        </ListItem>
                    }>

      </Container>
    );
      }
    }

componentDidMount（）{
getJson（）；
}
getJson=（）=>{
常量url=`https://example.com/priceon?ori=${a}&des=${b}`
获取（url）
....
};
render（）{
//在这里，如果数据存在和不存在，我将设置一个条件
如果（this.state.results==“”）{
返回(
数据空值
);
}否则{
返回(
index.toString（）}
dataArray={this.state.results}
renderRow={（结果）=>
{results.tipe}-{results.service}
}>
);
}
}

如何创造合适的条件

如果数据存在，则它会出现；如果数据为空，则显示空数据

如果API调用以数组形式返回，则可以执行

此.state.results.length

检查，可能需要额外的

空

检查

请尝试以下操作：

render() {
   <>
      {
          this.state.results && this.state.results.length ?
             <Container style={styles.container}>
                 { /* your code */ }
             </Container>
          :
             <View>
                 <Text style={{fontWeight:'bold',fontSize:16}}>DATA NULL</Text>
             </View>
      }
   </>

render（）{
{
this.state.results&&this.state.results.length？
{/*您的代码*/}
:
数据空值
}

进一步阅读。尤其是本节。

以下是代码：）

render（）{
//您可以使用三元if语句，这比普通if（s）好得多
返回（（this.state.results.length）？
(
数据空值
):
(
index.toString（）}
dataArray={this.state.results}
renderRow={（结果）=>
{results.tipe}-{results.service}
}>
));
}

您能再更正一次吗？我复制了这个错误代码

render() {
//you can use ternary if statement, this is much more better than normal if(s)
return((this.state.results.length)?
    (<View>
        <Text style={{fontWeight:'bold',fontSize:16}}>DATA NULL</Text>
    </View>):
    (<Container style={styles.container}>
                <List 
                    keyExtractor = {(item, index)=> index.toString()} 
                    dataArray={this.state.results}
                    renderRow={(results) =>
                    <ListItem>
                        <Body>
                            <CardItem>
                                <Text>{results.tipe} - {results.service}</Text>
                            </CardItem>
                        </Body>
                    </ListItem>
                }>
  </Container>));
}