如何在本机反应中过滤数组？答案

【问题标题】：How do i filter an array in react native?如何在本机反应中过滤数组？
【发布时间】：2021-09-08 15:31:07
【问题描述】：

我是本机反应的新手，并且有一种情况是我试图将状态设置为另一个状态（数组）的过滤版本。使用当前代码，未过滤数组中的每个项目都被更改为过滤条件。如何将FilteredJobs 设置为仅包含“作业”，其中状态等于用户在 AppPicker 中选择的状态？

这是我的代码：

const [jobs, setJobs] = useState()
const [filteredJobs, setFilteredJobs] = useState()
const [status, setStatus] = useState()


    const handleStatusChange = (item) => {
        setFilteredJobs(
            jobs.filter( job => job.status = item.label )
        )
        setStatus(item)
    }

return (
        <View style={defaultStyles.screenNoPadding}>
            <AppTextInput placeholder='Search for a Job' icon='magnify' />
            <View style={styles.filterContainer}>
                <AppPicker 
                    color='white'
                    selectedItem={category}
                    onSelectItem={item => handleCategoryChange(item)}
                    items={categories} 
                    placeholder='Filter' 
                    icon='apps' />
                <AppPicker 
                    color='white'
                    selectedItem={status}
                    onSelectItem={item => handleStatusChange(item)}
                    items={statuses} 
                    placeholder='Status' 
                    icon='apps' />
            </View>
            <FlatList 
                style={styles.list}
                data={filteredJobs ? filteredJobs : jobs}
                keyExtractor={job => job.id.toString()}
                renderItem={({ item }) => (
                    <ListItem 
                        company={item.company}
                        position={item.position}
                        status={item.status}
                        onPress={() => navigation.navigate('Details', { item })} 
                    /> 
                )} 
               ItemSeparatorComponent={ListItemSeparator} 
            />
        </View>
    );

提前致谢！请记住，作业是在加载组件时在 useEffect 中获取的。

【问题讨论】：

以后如果您在过滤前后使用console.log注销项目，将会对您有所帮助。如果你这样做了，答案会更明显。

标签： javascript react-native

【解决方案1】：

这是因为你应该使用比较，而不是归因。

    const handleStatusChange = (item) => {
        setFilteredJobs(
                                        // FIX HERE, USE == INSTEAD OF =
            jobs.filter( job => job.status == item.label )
        )
        setStatus(item)
    }

【讨论】：

谢谢！以前试过，但我想我没做对！

【解决方案2】：

@guilherme 是对的，这是一个简单的错误，您分配而不是比较。养成使用===比较字符串的习惯。

也是未来解决这些问题的方法：console.log 在你正在做的事情之前和之后不起作用。如果你有的话，它会很快跳出来。如果您在日志输出中获得[Object object]，请使用JSON.stringify 来记录对象。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

【讨论】：