搜索框函数使用redux in native native

Question

我正在尝试在我的数据库项目中进行搜索，但我收到的是以下错误：Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

这是我创建搜索页面的代码。 JobItem我在作业页面中使用它，一切都正确显示但是当我把第一个字母放在搜索框中时，我收到错误。

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>
        )
    }
}

请有人帮助我。