Реактивный сборщик, где элемент 2-го сборщика зависит от выбранного значения 1-го сборщика - PullRequest
Новая
       22

Реактивный сборщик, где элемент 2-го сборщика зависит от выбранного значения 1-го сборщика

0 голосов
/ 02 октября 2019

У меня есть 2 сборщика 1 основной сборщик, где у 2-х сборщиков пункты будут зависеть от его выбранного значения. Список каждого подфильтра загружается в ComponentDidMount.

Picker1) FilterBy: All, Category, Status

Picker2) SubFilter: All, если Picker1 === Показ категории {item1, item2, item3 ...}, если Picker1 === Показ состояния {Открыто, Отменено, Отклонено, Выполнено}

Сценарий:

  1. Выберите «Category» в FilterBy: setFilterBy, который является setState FilterBy, будет запущен.
  2. Элемент списка SubFilter для категории будет отображаться.
  3. Выберите значение SubFilter, где в выбранном значениине существует в значениях другого списка в этом случае в списке подфильтров Status. setSubFilter setState будет запущен.
  4. Будет вызывать для получения базы отфильтрованного списка по выбранным фильтрам.
  5. Снова выберите новый FilterBy: на этот раз «Статус».
  6. Приложение закрывается.

ВАЖНОЕ ПРИМЕЧАНИЕ

Поизменяя FilterBy, он также устанавливает значение SubFilter в 0, что должно предположительно решить возможную проблему, когда текущего выбранного значения SubFilter не существует в списке. Это работает, потому что, когда я первоначально выбираю любое значение, которое также может существовать в индексах Списка статуса, оно сбрасывает значение SubFilter на 0, но по какой-то причине, если выбранное мной значение не существует в Списке статуса, это не так? *

Удаление selectedValue на подпорках Пикера работает, но это не правильный путь, так как он не будет отображать текущее выбранное значение. Но он правильно фильтрует отображаемый список.

Повторный выбор значения по умолчанию 'ALL' в SubFilter перед повторным выбором нового значения FilterBy также работает нормально.

Все готово, пытаясь отделить рендеринг сборщиков,Это не работает. Попытался преобразовать значение FilterBy в строку в 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>
...