Javascript 反应本地选择器，其中第二选择器'；s项取决于第一个选择器的selectedValue

我有2个选择器1个主选择器，第2个选择器中的项目将取决于它的选定值。每个子过滤器的列表都加载到ComponentDidMount上

选择器1）过滤器按：全部、类别、状态

Picker2）子筛选器：全部，如果Picker1==类别显示{item1，item2，item3…}，如果Picker1==状态显示{Open，Cancelled，Rejected，Done}

场景：

选择FilterBy上的“类别”：将触发FilterBy的设置状态setFilterBy

将呈现类别的子筛选器列表项

选择子过滤器值，其中在状态的子过滤器列表中，所选值不存在于其他列表的值中（本例中为状态的子过滤器列表）。设置子过滤器设置状态将被触发

将调用以获取基于选定筛选器的筛选列表

重新选择一个新的过滤器：这一次是“状态”

应用程序关闭

重要提示

在更改过滤器时，它还将子过滤器的值设置为0，这应该可以解决当前选定子过滤器的值在列表中不存在的可能问题。它被证明是有效的，因为当我最初选择状态列表索引中也可能存在的任何值时，它会将子筛选器的值重置为0，但由于某种原因，我选择的值不存在于状态列表中，它不存在

移除拾取者道具上的selectedValue可以工作，但这不是正确的方法，因为它不会显示当前选定的值。但它确实能正确过滤显示的列表

在重新选择新的FilterBy值之前，重新选择子过滤器的默认值“ALL”也可以正常工作

All ready尝试分离选择器的渲染。它不起作用。尝试将FilterBy的值转换为selectedValue上的字符串。还尝试对selectedValue设置条件

<Grid style={styles.alignCenter}>
              <Col>
                <Text>Filter by:</Text>
              </Col>
              <Col size={3}>
                <Form>
                  <Picker
                    id="Filter"
                    mode="dropdown"
                    iosIcon={<Icon name="arrow-down" />}
                    style={{ width: '100%', flex: 1 }}
                    selectedValue={filterBy}
                    onValueChange={itemValue => {
                      setSelectedCategory(0);
                      setSelectedStatus(0);
                      setCurrentPage(1);
                      setFilterBy(itemValue);
                    }}
                  >
                    <Picker.Item key="0" label="Select Filter" value="key0" />
                    <Picker.Item label="Category" value="key1" />
                    <Picker.Item label="Status" value="key2" />
                  </Picker>
                </Form>
              </Col>
            </Grid>
            <Grid style={styles.alignCenter}>
              <Col style={styles.marginTop10}>
                <Text>SubFilter</Text>
              </Col>
              <Col size={3} style={styles.marginTop10}>
                <Form>
                  {filterBy === 'key1' ? (
                    <Picker
                      mode="dropdown"
                      iosIcon={<Icon name="arrow-down" />}
                      style={{ width: '100%', flex: 1 }}
                      selectedValue={selectedCategory}
                      onValueChange={itemValue => {
                        setCurrentPage(1);
                        setSelectedStatus(0);
                        setSelectedCategory(0);
                        refetch();
                      }}
                    >
                      <Picker.Item key="0" label="All" value="0" />
                      {categoryList &&
                        categoryList.getTaskCategoryList.list.map(item => (
                          <Picker.Item
                            label={item.category_name}
                            value={item.id}
                            key={item.id}
                          />
                        ))}
                    </Picker>
                  ) : filterBy === 'key2' ? (
                    <Picker
                      mode="dropdown"
                      iosIcon={<Icon name="arrow-down" />}
                      style={{ width: '100%', flex: 1 }}
                      selectedValue={selectedStatus}
                      onValueChange={itemValue => {
                        setCurrentPage(1);
                        setSelectedCategory(0);
                        setSelectedStatus(0);
                        refetch();
                      }}
                    >
                      <Picker.Item key="0" label="All" value="0" />
                      {Object.values(TaskStatus)
                        .slice(1)
                        .map((item, idx) => (
                          <Picker.Item
                            label={item}
                            value={idx}
                            key={item}
                          />
                        ))}
                    </Picker>
                  ) : null}
                </Form>
              </Col>
            </Grid>

筛选依据：
{
设置所选类别（0）；
设置选定状态（0）；
设置当前页面（1）；
setFilterBy（itemValue）；
}}
>
副过滤器
{filterBy==='key1'(
{
设置当前页面（1）；
设置选定状态（0）；
设置所选类别（0）；
重新蚀刻（）；
}}
>
{类别列表&&
categoryList.getTaskCategoryList.list.map（项=>(
))}
)：filterBy==='key2'？(
{
设置当前页面（1）；
设置所选类别（0）；
设置选定状态（0）；
重新蚀刻（）；
}}
>
{Object.values（TaskStatus）
.切片（1）
.map（（项目，idx）=>(
))}
)：null}

如果我对更改第一个筛选器（选取器）的理解正确，它应该在第二个筛选器（选取器）中设置一些数据。是否设置？是的，它将是为第二个选取器呈现列表的决定因素。从更改第一个筛选器的代码来看，您正在呈现第二个筛选器。因为您是有条件地呈现第二个列表，每次第一个列表更改时，它都会初始化第二个列表，初始值如您所述的0th。您可以做的是为每个可能的第二个选择器维护单独的状态变量。这样它就不会被重置。@ThakurKarthik您是说我应该为类别和状态设置单独的变量吗？不，这会像firstFilter:[all | category | status]，子过滤器1:[ActiveItemOfAstList | first-ItemOfAstList]，子过滤器2:[ActiveItemOfAndList | first-ItemOfAndList]，。。。。