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

时间:2019-02-23 11:46:29

标签: javascript reactjs react-native

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

错误:

不变违反:不变违反:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件,或者可能混淆了默认导入和命名导入

const req = {
            data: [
                {
                    type : "register",
                    attributes : {
                        username : "Some name",
                        password : "asdasdasdasdasd3",
                        name : "some name",
                        email : "somename@yahoo.com"
                    }
                }
            ]
        }
axios.post(`http://127.0.0.1:4040/register`, { req })
            .then(res => {
                console.log(res);
                console.log(res.data);
        })

当设置numColumn = {1}时,它运行得很好,超过值1会引发错误

    func register (w http.ResponseWriter, r *http.Request) {
            w.Header().Set("Access-Control-Allow-Origin", "*")
            w.Header().Set("Access-Control-Allow-Credentials", "true")
            w.Header().Set("Content-Type", "application/json");
            jsonBody := registerController.Perform(r)
            w.Write(jsonBody)
    }

    func main() {
        router := mux.NewRouter().StrictSlash(true)

        fmt.Println("server running at port " + SERVER_PORT)
        router.HandleFunc("/register", register).Methods("POST")

        http.ListenAndServe(SERVER_PORT, router)
}

ImageList.js

"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",

1 个答案:

答案 0 :(得分:0)

renderItemFlatList接受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>
    );
}

使用numColumns={1}FlatList可以呈现从renderList返回的映射视图,而不能使用numColums={2}