如何使用选择器显示从清单中筛选出的数据？

Question

我正在尝试使用两个选择器来过滤通过单位列表接收的数据并传递到另一个单位列表。 我得到的错误是null不是对象。没有选择器，一切正常。

我在flatList中添加了extraData作为选项，以选择对原始数组所做的任何更改。

下面是一小段数据。

tools: [
            {
                id: '200',
                title: 'This is a tool 1',
                subTitle: 'Just a subtitle',
                meaning:'This is what the tool means',
                level: 'hard',
                extraCategories: ['Procrastination', 'Sleep', 'Power'],
                action: ['first step', 'second step', 'third step', 'fourth step'],
                questions: ['Question 1', 'question 2', 'question 3'],
                example: ['This is a basic example of the tool'],
                source: ['www.morearticle.com']
            }]

import React, {useState} from "react";
import { Modal, View, Text, Picker, StyleSheet, FlatList, TouchableOpacity } from "react-native";
import ToolButton from './ToolButton';
import ToolDetail from './ToolDetail';
import Icon from "react-native-ionicons";

function categoryDetail (props) {

    const [toolSelect, setToolSelect] = useState(null);
    const [level, setLevel] = useState('');
    const [type, setType] = useState('');

    let updateLevel = (level) => {
        setLevel(level.target.value)
    }

    let updateType = (type) => {
        setType(type.target.value)
    }

    let modalClosedHandlerTool = () => {
        setToolSelect(null)
      };

    let tools = [...props.selectedTool.tools];

    let toolSelectedHandlerTool = key => {
        let openTool = tools.find(tool => {
            return tool.id === key;
        }) 
          setToolSelect(
              openTool              
          );
     };

    let modalContent = null;

    if(level === 'easy'){
        tools = tools.filter(tool => tool === tool.level)
    }

    if(type === 'procrastination'){
        tools = tools.filter(tool => tool === tool.type)
    }

    if (props.selectedTool) {
        modalContent = (
            <View>
                <View style={styles.header}>
                <View>

                <TouchableOpacity style={styles.back} onPress={props.onModalClosed}>
                <Icon ios="ios-arrow-round-back" android="arrow-back" size={32} color="#FFF" />
                </TouchableOpacity>
                </View>
                    <View>
                        <Text style={styles.headerText}>{props.selectedTool.category}</Text>
                    </View>
                    <View style={styles.toolSection}>
                        <Text style={styles.headerTools}>{props.selectedTool.toolNum}</Text>
                        <Text style={styles.headerToolsTools}>Tools</Text>
                    </View>
                </View>
                <View style={styles.descriptionSection}>
                    <Text style={{color: '#888'}}>Description</Text>
                    <View style={{flexDirection: 'row'}}>
                    <Icon name="rocket" style={{marginTop: 20, marginRight: 20}}/>
                    <Text style={styles.description}>{props.selectedTool.description}</Text>
                    </View>
                </View>
                <View >
                <View style={{flexDirection: 'row' }}>
                <View style={{flexDirection: 'row', alignItems: 'center', width:'50%',backgroundColor: 'white', justifyContent: 'center', borderWidth: 1, borderColor: '#eee'}}>
                <Picker selectedValue={level} onValueChange={() => updateLevel} style={{height:40, backgroundColor: 'white',width: '80%'}}>
                    <Picker.Item label = "Select Level" />   
                    <Picker.Item label = "Easy" value = "easy" />
                    <Picker.Item label = "Medium" value = "medium" />
                    <Picker.Item label = "Hard" value = "hard" />
                </Picker>
                <Icon name="podium" size={20}/>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center', width:'50%',backgroundColor: 'white', justifyContent: 'center', borderWidth: 1, borderColor: '#eee'}}>
                <Picker selectedValue={type} onValueChange={() => updateType} style={{height:40, backgroundColor: 'white',width: '80%'}}>
                    <Picker.Item label = "Select Type"/>
                    <Picker.Item label = "Easy" value = "easy" />
                    <Picker.Item label = "Medium" value = "medium" />
                    <Picker.Item label = "Hard" value = "hard" />
                </Picker>
                <Icon name="checkmark-circle" size={20}/>
                </View>
                </View>
                <View>
                <ToolDetail
                    toolSelect={toolSelect}
                    onModalClosed={modalClosedHandlerTool}
                />
                </View>
                <FlatList
                        data={props.selectedTool.tools}
                        extraData={tools}
                        renderItem={({ item }) => (
                            <ToolButton 
                                extraCategories={item.extraCategories}
                                title={item.title}
                                subTitle={item.subTitle}
                                meaning={item.meaning}
                                action={item.action}
                                questions={item.questions}
                                example={item.example}
                                closeModal={modalClosedHandlerTool}
                                onToolPressed={() => toolSelectedHandlerTool(item.id)} 
                            />)}
                        keyExtractor={item => item.id}
                        showsVerticalScrollIndicator={false}
                    ></FlatList>
                </View>
            </View>
        );
    }
    return (
        <Modal
        onRequestClose={props.onModalClosed}
        visible={props.selectedTool !== null}
        animationType="fade"
        >
        <View style={styles.container}>
            {modalContent}
        </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#EBECF4"
    },  
    back: {
        width: 32,
        height: 32,
        borderRadius: 16,
        backgroundColor: "rgba(21, 22, 48, 0.2)",
        alignItems: "center",
        justifyContent: "center"
    },
  header: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: "#1da1f2",
      paddingRight: 20,
      paddingLeft: 20,
      paddingTop: 10,
      paddingBottom: 10
  },
  headerText: {
    fontSize: 22,
    fontWeight: '700',
    color: '#fff'
  },
  headerTools: {
    fontSize: 20,
    fontWeight: '700',
    marginTop: 3,
    color: "#1da1f2"
  },
  headerToolsTools: {
    marginTop: -3,
    color: "#1da1f2"
  },
  toolSection: {
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: '#fff',
    width: 50,
    height: 50,
    borderRadius: 10,
  },
  description: {
    marginTop: 10,
    fontSize: 16,
    lineHeight: 25,
    marginRight: 20
  },
  descriptionSection: {
    padding: 20,
    backgroundColor: "#FFF",
    borderBottomColor: "#EBECF4",
    shadowColor: "#454D65",
    shadowOffset: { height: 5 },
    shadowRadius: 15,
    shadowOpacity: 0.2,
  }
});

export default categoryDetail;

我希望电平选择器先显示所有“简单”选项，然后显示其余选项，或者当选择“中”先显示介质，然后显示其余选项时。 类型选择器由一个值数组（extraCategories）组成，并且应仅显示所有选择的相关选项。