javascript - 我在设置 Flatlist numColumn >=2 时遇到问题，引发违规错误

Question

我在设置 Flatlist numColumn >=2 时遇到问题，引发违规错误。

错误 ：

不变违规：不变违规：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

"axios": "^0.18.0",
 "react": "16.6.3",
 "react-native": "^0.58.4",
 "react-native-elements": "^1.0.0",
 "react-native-gesture-handler": "^1.0.15",
 "react-native-vector-icons": "^6.2.0",
 "react-navigation": "^3.1.2",

当设置 numColumn = {1} 时，它运行得非常好，高于值 1 它会引发错误

<FlatList data={this.state.mdata}
              renderItem={this.renderList}
              keyExtractor={(item, index) => `${index}`}
              horizontal={false} numColumns={2}/>

ImageList.js

import {Text, View, ScrollView, TouchableOpacity,StyleSheet,Dimensions,FlatList} from 'react-native';
import  {Card}from 'react-native-elements';
import API from './axios';
const styles = StyleSheet.create({
    image: {
        flex:1,width:'50%',height:'50%',
        alignItems: 'center',
        justifyContent: 'center',
    },

})

export default class ImageList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            mloading: false,
            mdata: [],
            current_page: 1,
            merror: null,
            mhasMore: true
        }
    }
    componentDidMount()  { this.getListOfPictures(); }

    render() {
        return (

            <FlatList
              data={this.state.mdata}
              renderItem={this.renderList}
              keyExtractor={(item, index) => `${index}`}
              horizontal={false} numColumns={2}/> 

           )
    }


    /********************************************************************************
     * getListOfPictures All pictures for dashboard
     ********************************************************************************/
    getListOfPictures = () => {
        if (this.state.mloading) { return; }
        this.setState({ mloading: true });

        API.get(`dashboard/all`)
            .then(res => {
                console.log("reco1m",res.data.recommendations[0]);
                const nextPictures= res.data.recommendations.map(data => ({
                    title: data.style,
                    image_url: data.img,
                    description: data.description,
                    id: data.style
                }));
                console.log(nextPictures);
                this.setState({
                    mhasMore: true,
                    mdata: [...this.state.mdata, ...nextPictures],
                    mloading: false,
                    current_page: this.state.current_page + 1})
            }).catch(error => {this.setState({ merror:error, mloading: false });});
    }

    isCloseToBottom({ layoutMeasurement, contentOffset, contentSize }) {
        return layoutMeasurement.height + contentOffset.y
        >= contentSize.height - 0;
    }

    renderList = () => {
        return ( this.state.mdata.map((u) => {
            return (
                <View style={{flex: 0.5, height: 150, margin: 5}}>
                <TouchableOpacity
                    key={u.id} >
                   <Card
                       featuredTitle={u.title}
                       image={{ uri: u.image_url }}
                       imageStyle={styles.image}>
                       <View style={{ padding: 10 }}>
                           <Text style={{ fontSize: 15}}>Description:</Text>
                           <Text>{u.description}</Text>
                       </View>
                   </Card>
                </TouchableOpacity>
                </View>
            );
        }))
    }


}

标签： javascriptreactjsreact-native

Answer 1

renderItem要FlatList接受item传递给的函数，您需要从中呈现一个元素

renderList = ({item: u}) => {

   return (
       <View style={{flex: 0.5, height: 150, margin: 5}}>
            <TouchableOpacity
                key={u.id} >
               <Card
                   featuredTitle={u.title}
                   image={{ uri: u.image_url }}
                   imageStyle={styles.image}>
                   <View style={{ padding: 10 }}>
                       <Text style={{ fontSize: 15}}>Description:</Text>
                       <Text>{u.description}</Text>
                   </View>
               </Card>
            </TouchableOpacity>
        </View>
    );
}

With numColumns={1},FlatList能够渲染从renderList但不能返回的 Mapped 视图numColums={2}