不变违规：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

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

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