不变违规：App（…）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

Question

我本来是React Native的新手，但是我很难加载该应用程序。当我使用直接从JSON文件导入的数据时，一切正常，然后我决定使用json-server模块动态实现它，并利用redux，但是一旦启动该应用程序，我就会收到此错误消息。

我进行了几次搜索，显然与ES6语法有关。 例如，我看了这个家伙的答案： Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

我在render方法中没有使用任何箭头功能。我不知道还有什么问题。任何帮助，将不胜感激 。

[![import React, { Component } from 'react';
import { ScrollView, View, Text } from 'react-native';
import { Card } from 'react-native-elements';
import { ListItem} from 'react-native-elements';
import { connect } from 'react-redux';
import { baseUrl } from '../../shared/baseUrl';

const mapStateToProps = (state) => {
    return {
       dishes: state.dishes,
       comments: state.comments,
       promotions: state.promotions,
       leaders: state.leaders
  }
 }

 function RenderItem(props){
     const item = props.item;

     if(item != null){
       return(
         <Card
            featuredTitle={item.name}
            featuredSubtitle={item.designation}
            image={{ uri: baseUrl + item.image }}>
            <Text style={{ margin: 10 }}>
                {item.description}
            </Text>
         </Card>
       )
    }
  }

  class HomeScreen extends Component {

     static navigationOptions = {
        title: 'Accueil'
     } 


render() {
    return (
        <ScrollView>
            <RenderItem item={this.props.dishes.dishes.filter((dish) => dish.featured)\[0\]} />
            <RenderItem item={this.props.promotions.promotions.filter((promo) => promo.featured)\[0\]} />
            <RenderItem item={this.props.leaders.leaders.filter((leader) => leader.featured)\[0\]} />
        </ScrollView>
    );
}
  }

    export default connect(mapStateToProps)(HomeScreen);

  export const baseUrl = 'http://<ip-address>:3001';

Answer 1

看来您的renderItem没有返回数据，并且您没有任何逻辑可以解释它。您也没有定义项目。试试这个...

function RenderItem(props) {

  const item = props.item;
  if (item != null) {
        return(
            <Card
                featuredTitle={item.name}
                featuredSubtitle={item.designation}
                image={{uri: baseUrl + item.image}}>
                <Text
                    style={{margin: 10}}>
                    {item.description}</Text>
            </Card>
        );
    }
    else {
        return(<View></View>);
    }
}