javascript - react-native Picker，其中第二个选择器的项目取决于第一个选择器的 selectedValue

Question

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

Picker1) FilterBy：全部、类别、状态

Picker2) SubFilter: All, if Picker1 === Category show {item1, item2, item3 ...}, if Picker1 === Status show {Open, Cancelled, Rejected, Done}

设想：

1. 在 FilterBy 上选择“Category”：将触发作为 FilterBy 的 setState 的 setFilterBy。
2. SubFilter 的类别列表项将呈现。
3. 选择子过滤器值，其中所选值不存在于其他列表的值中，在这种情况下，在状态的子过滤器列表中。setSubFilter setState 将被触发。
4. 将调用以根据所选过滤器获取过滤列表。
5. 重新选择一个新的 FilterBy：这次是“状态”。
6. 应用程序关闭。

重要的提示

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

删除 Picker 道具上的 selectedValue 是可行的，但这不是正确的方法，因为它不会显示当前选择的值。但它确实正确过滤了显示的列表。

在重新选择新的 FilterBy 值之前重新选择 SubFilter 的默认值“ALL”也可以正常工作。

一切准备就绪，尝试分离 Pickers 的渲染。这没用。尝试将 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>

标签： javascriptreactjsreact-nativereact-native-androidpicker