React native 在react native中使用redux的搜索框函数

我试图在我的db项中进行搜索，但收到的只是以下错误：

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

这是我创建搜索页面的代码。JobItem我在jobs页面中使用它，所有内容都正确显示，但在这里，当我将第一个字母放入搜索框时，我得到了错误

import JobItem from './JobItem';

const { width, height } = Dimensions.get('window')

class SearchBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: '',
            data: ''
        }
    }

    static navigationOptions = {
        headerVisible: false
    }

    filter(text) {
        const data = this.props.jobs;
        console.log(data);
        const newData = data.filter(function (job) {
            const itemData = job.title.toUpperCase()
            const textData = text.toUpperCase()
            return itemData.indexOf(textData) > -1
        })
        this.setState({
            data: newData,
            text: text,
        })
    }
    deleteData() {
        this.setState({ text: '', data: '' })
    }
    _renderJobs(job) {
        return this.props.jobs.map((job) => {
            return (
                <JobItem
                    key={job._id}
                    title={job.title}
                    shortDescription={job.shortDescription}
                    logo={job.avatar}
                    company={job.company}
                    id={job._id}
                    city={job.location[0].city}
                    postDate={job.postDate}
                    dispatch={this.props.dispatch}
                    onPress={() => this.onJobDetails(job)}
                />
            )
        })
    }
    render() {
        const { goBack } = this.props.navigation
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <FontAwesome
                        name="magnify"
                        color="grey"
                        size={20}
                        style={styles.searchIcon}
                    />
                    <TextInput
                        value={this.state.text}
                        onChangeText={(text) => this.filter(text)}
                        style={styles.input}
                        placeholder="Search"
                        placeholderTextColor="grey"
                        keyboardAppearance="dark"
                        autoFocus={true}
                    />
                    {this.state.text ?
                        <TouchableWithoutFeedback onPress={() => this.deleteData()}>
                            <FontAwesome
                                name="clock-outline"
                                color="grey"
                                size={20}
                                style={styles.iconInputClose}
                            />
                        </TouchableWithoutFeedback>
                    : null}
                    <TouchableWithoutFeedback style={styles.cancelButton} onPress={() => goBack()}>
                        <View style={styles.containerButton}>
                            <Text style={styles.cancelButtonText}>Cancel</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
                <ScrollView>
                    <FlatList
                        style={{ marginHorizontal: 5 }}
                        data={this.state.data}
                        numColumns={3}
                        columnWrapperStyle={{ marginTop: 5, marginLeft: 5 }}
                        renderItem={({ job }) => this._renderJobs(job)}
                    />
                </ScrollView>
            </View>
        )
    }
}

从“/JobItem”导入JobItem；
const{width，height}=Dimensions.get（'window'）
类搜索栏扩展组件{
建造师（道具）{
超级（道具）
此.state={
文本：“”，
数据：“”
}
}
静态导航选项={
headervible:错误
}
过滤器（文本）{
const data=this.props.jobs；
控制台日志（数据）；
const newData=data.filter（函数（作业）{
const itemData=job.title.toUpperCase（）
const textData=text.toUpperCase（）
返回itemData.indexOf（textData）>-1
})
这是我的国家({
数据：新数据，
文本：文本，
})
}
删除数据（）{
this.setState（{text:''，数据：'}）
}
_渲染作业（作业）{
返回此.props.jobs.map（（作业）=>{
返回(
this.onJobDetails（作业）}
/>
)
})
}
render（）{
const{goBack}=this.props.navigation
返回(
this.filter（text）}
style={style.input}
占位符=“搜索”
占位符textcolor=“灰色”
键盘外观=“深色”
自动对焦={true}
/>
{this.state.text？
this.deleteData（）}>
：null}
goBack（）}>
取消
这个._renderJobs（作业）}
/>
)
}
}

---

请任何人帮助我。

你如何导出你的组件，以及你如何导入它？导出默认作业列表，并在顶部导入，如你所见你忘记了导出组件…如果我在JobsList.js中使用该组件，我怎么会忘记导出它？我的错误抱歉

作业项

。我在

作业列表中使用
JobItem