检查 `Rest Api` 的渲染方法

Question

我收到了这个错误

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

查看RestApi的渲染方法。

这是我的代码 App.js

import React from 'react';
import { StyleSheet } from 'react-native';
import RestApi from './x/RestApi';


export default function App() {
  return (
    <RestApi/>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    color: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  }
})

这是我的代码 RestApi.js

import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { Button, Flatlist, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';

export default function RestApi() {
    const [title, setTitle] = useState("");
    const [value,setValue] = useState("");
    const [items, setItems] = useState([]);
    const [button, setButton] = useState("Simpan");
    const [selectedUser, setSelectedUser] = useState({});

    const submit =()=>{
        const data = {
            value,title
        }
        //console.log(data)
        if(button=="Simpan"){
            axios.post('https://achmadhilmy-sanbercode.my.id/api/v1/news', data)
            .then(res=>{
                console.log('res: ', res)
                setTitle("")
                setValue("")
                GetData()
            }).catch(err=>{
                console.log('error: ',err)
            })
            }else{
                axios.put(`https://achmadhilmy-sanbercode.my.id/api/v1/news/${selectedUser.id}`, data)
                .then(res=>{
                    console.log('res: ',res)
                    setTitle("")
                    setValue("")
                    GetData()
                    setButton("Simpan")
                }).catch(err=>{
                    console.log('error: ', err)
                })
            }
        }
        const onSelectItem = (item)=>{
            console.log(item)
            setSelectedUser(item)
            setTitle(item.title)
            setValue(item.value)
            setButton("Update")
        }

        const GetData=()=>{
            axios.get('https://achmadhilmy-sanbercode.my.id/api/v1/news')
            .then(res=>{
                const data1 = (res.data.data)
                console.log('res: ', data1)
                setItems(data1)
            })
        }
        const onDelete=(item)=>{
            axios.delete(`https://achmadhilmy-sanbercode.my.id/api/v1/news/${item.id}`)
            .then(res=>{
                console.log('res: ', res)
                GetData()
            }).catch(err=>{
                console.log('error: ', err)
            })
        }

        useEffect(() => {
            GetData()
        }, [])

        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.title}>Tampilkan Api (CRUD)</Text>
                </View>
                <View style={styles.content1}>
                    <Text>Post Data</Text>

                    <TextInput
                        placeholder="Masukan judul berita"
                        style={styles.input}
                        value={title}
                        onChangeText={(value)=>setTitle(value)}
                    />
                    <TextInput
                        placeholder="Masukan Isi berita"
                        style={styles.input}
                        value={value}
                        onChangeText={(value)=>setValue(value)}
                    />
                <Button
                title={button}
                onPress={submit}
                />
                </View>

                <View style={styles.content1}>
                    <Text>Get Data Berita</Text>
                    
                    <Flatlist
                        data={items}
                        keyExtractor={(item, index) => `${item.id}-${index}`}
                        renderItem={({item})=>{
                            return (
                                <View>
                                <TouchableOpacity onPress={()=>onDelete(item)}>
                                <Text style={{color: 'red', alignSelf: 'flex-end'}}>X</Text>    
                                </TouchableOpacity>
                                <TouchableOpacity onPress={()=>onSelectItem(item)}style={{borderRadius: 6,backgroundColor:'grey', padding: 5, marginBottom:10}}>
                                <Text style={{color: 'white'}}>{item.title}</Text>
                                <Text style={{color: 'white'}}>{item.value}</Text>
                                </TouchableOpacity>
                                </View>    
                            )
                        }}
                    />



                </View>
            </View>
        )
}

    const styles = StyleSheet.create({
        container:{
            flex:1,
            backgroundColor:'white'
        },
        header:{
            paddingTop: 50,
            paddingHorizontal: 16,
            backgroundColor: 'grey',
            alignItems: 'center'
        },
        title:{
            color: 'white',
            fontSize: 20
        },
        content1:{
            paddingHorizontal: 16
        },
        input:{
            borderWidth:1,
            paddingVertical: 10,
            paddingHorizontal: 5,
            borderRadius: 6,
            marginTop: 10
        },
        contentNews:{
            backgroundColor:'grey',
            paddingVertical:10
        }
    })

Answer 1

您的 RestApi 组件确实会返回任何内容，因为 return 语句嵌套在提交函数中，但不会被调用。

您可以尝试取消嵌套返回语句吗？请参见下面的示例，其中我还取消了 useEffect 调用和其他几个函数。

import axios from 'axios'
import React, { useState, useEffect } from 'react'
import {
Button,
Flatlist,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from 'react-native'

export default function RestApi() {
const [title, setTitle] = useState('')
const [value, setValue] = useState('')
const [items, setItems] = useState([])
const [button, setButton] = useState('Simpan')
const [selectedUser, setSelectedUser] = useState({})

const submit = () => {
    const data = {
        value,
        title
    }
    //console.log(data)
    if (button == 'Simpan') {
        axios
            .post('https://achmadhilmy-sanbercode.my.id/api/v1/news', data)
            .then(res => {
                console.log('res: ', res)
                setTitle('')
                setValue('')
                GetData()
            })
            .catch(err => {
                console.log('error: ', err)
            })
    } else {
        axios
            .put(
                `https://achmadhilmy-sanbercode.my.id/api/v1/news/${selectedUser.id}`,
                data
            )
            .then(res => {
                console.log('res: ', res)
                setTitle('')
                setValue('')
                GetData()
                setButton('Simpan')
            })
            .catch(err => {
                console.log('error: ', err)
            })
    }
}

const onSelectItem = item => {
    console.log(item)
    setSelectedUser(item)
    setTitle(item.title)
    setValue(item.value)
    setButton('Update')
}

const GetData = () => {
    axios
        .get('https://achmadhilmy-sanbercode.my.id/api/v1/news')
        .then(res => {
            const data1 = res.data.data
            console.log('res: ', data1)
            setItems(data1)
        })
}
const onDelete = item => {
    axios
        .delete(
            `https://achmadhilmy-sanbercode.my.id/api/v1/news/${item.id}`
        )
        .then(res => {
            console.log('res: ', res)
            GetData()
        })
        .catch(err => {
            console.log('error: ', err)
        })
}

useEffect(() => {
    GetData()
}, [])

return (
    <View style={styles.container}>
        <View style={styles.header}>
            <Text style={styles.title}>Tampilkan Api (CRUD)</Text>
        </View>
        <View style={styles.content1}>
            <Text>Post Data</Text>

            <TextInput
                placeholder="Masukan judul berita"
                style={styles.input}
                value={title}
                onChangeText={value => setTitle(value)}
            />
            <TextInput
                placeholder="Masukan Isi berita"
                style={styles.input}
                value={value}
                onChangeText={value => setValue(value)}
            />
            <Button title={button} onPress={submit} />
        </View>

        <View style={styles.content1}>
            <Text>Get Data Berita</Text>

            <Flatlist
                data={items}
                keyExtractor={(item, index) => `${item.id}-${index}`}
                renderItem={({ item }) => {
                    return (
                        <View>
                            <TouchableOpacity
                                onPress={() => onDelete(item)}>
                                <Text
                                    style={{
                                        color: 'red',
                                        alignSelf: 'flex-end'
                                    }}>
                                    X
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => onSelectItem(item)}
                                style={{
                                    borderRadius: 6,
                                    backgroundColor: 'grey',
                                    padding: 5,
                                    marginBottom: 10
                                }}>
                                <Text style={{ color: 'white' }}>
                                    {item.title}
                                </Text>
                                <Text style={{ color: 'white' }}>
                                    {item.value}
                                </Text>
                            </TouchableOpacity>
                        </View>
                    )
                }}
            />
        </View>
    </View>
)
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: 'white'
},
header: {
    paddingTop: 50,
    paddingHorizontal: 16,
    backgroundColor: 'grey',
    alignItems: 'center'
},
title: {
    color: 'white',
    fontSize: 20
},
content1: {
    paddingHorizontal: 16
},
input: {
    borderWidth: 1,
    paddingVertical: 10,
    paddingHorizontal: 5,
    borderRadius: 6,
    marginTop: 10
},
contentNews: {
    backgroundColor: 'grey',
    paddingVertical: 10
}
})