不变违规：应用程序（...）：渲染中没有 returned。这通常意味着缺少 return 语句。或者，为了不渲染任何内容，return null

Question

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

我进行了几次搜索，它显然与 ES6 语法有关。例如，我看过这个人的回答：

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

[![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>);
    }
}

不变违规：应用程序（...）：渲染中没有 returned。这通常意味着缺少 return 语句。或者，为了不渲染任何内容，return null

Invariant Violation: App(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

ecmascript-6

react-native

arrow-functions