Как установить множественный выбор с помощью @ shoutem / ui DropDownMenu?

Question

Я использую DropDownMenu и беру ссылку от официального doumcn https://shoutem.github.io/docs/ui-toolkit/components/dropdown-menu

Я хочу установить два DropDownMenu первое для зоны, а второе для города, если пользователь выбирает зону какВосток второй DropDownMenu должен установить значение E1 、 E2

Вот мой код:

import React, { Component } from 'react';
import { View } from 'react-native';
import { DropDownMenu, Text } from '@shoutem/ui';

class TestConfirm extends Component {

    constructor(props) {
        super(props);
        this.state = {
          zone: [
            {
              id: 0,
              brand: "North",
              models:
                {
                  model: "Audi R8",
                  image: {
                    url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Audi-R8.jpg"
                  },
                  description: "North Description"
                },
                children: [{
                    name: "N1",
                    id: 10,
                  },{
                    name: "N2",
                    id: 17,
                  }]
              },
            {
              id: 1,
              brand: "West",
              models: {
                model: "Chiron",
                image: {
                  url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Chiron.jpg"
                },
                description: "West Description"
              },
              children: [{
                name: "W1",
                id: 10,
              },{
                name: "W2",
                id: 17,
              }]
            },
            {
              id: 2,
              brand: "East",
              models: {
                model: "Dodge Viper",
                image: {
                  url: "https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"
                },
                description: "East Description"
              },
              children: [{
                name: "E1",
                id: 10,
              },{
                name: "E2",
                id: 17,
              }]
            },
          ],
        }
      }

  render() {
    const selectedZone = this.state.selectedZone || this.state.zone[0];
    console.log('selectedZone =>');
    console.log(selectedZone);
    console.log('selectedZone.children =>');
    console.log(selectedZone.children);
    return (
      <Screen>
        <DropDownMenu
            styleName="horizontal"
            options={this.state.zone}
            selectedOption={selectedZone ? selectedZone : this.state.zone[0]}
            onOptionSelected={(zone) => this.setState({ selectedZone: zone })}
            titleProperty="brand"
            valueProperty="cars.model"
        />
        <Text styleName="md-gutter-horizontal">
            {selectedZone ?
            selectedZone.models.description :
            this.state.zone[0].models.description}
        </Text>

       <DropDownMenu
            styleName="horizontal"
            options={selectedZone.children}
            selectedOption={selectedZone ? selectedZone : this.state.zone[0].children}
            onOptionSelected={(city) => this.setState({ selectedZone: city })}
            titleProperty="name"
            valueProperty="cars.model"
        />
      </Screen>
    );
  }
}

export default TestConfirm;

Вот мой экран выглядит так:

Если я выберу Восток, появится сообщение об ошибке

Invalid `selectedOption` {"id":2,"brand":"East","models":{"model":"Dodge Viper","image":{"url":"https://shoutem.github.io/img/ui-toolkit/dropdownmenu/Dodge-Viper.jpg"},"description":"East Description"},"children":[{"name":"E1","id":10},{"name":"E2","id":17}]}, DropDownMenu `selectedOption` must be a member of `options`.Check that you are using the same reference in both `options` and `selectedOption`.

Я проверяю, что мой console.log будет выглядеть так:

ключ children под именем - это то, что я хочу вставить в свой второй DropDownMenu

Я понятия не имею, как сделать следующий шаг.Любая помощь будет оценена.

Заранее спасибо.

Answer 1

Свойство

selectedOption для компонента DropDownMenu ожидает один объект, но this.state.zone[0].children - это массив.Вы можете изменить его на this.state.zone[0].children[0], чтобы устранить проблему.

Также, когда вы меняете раскрывающийся список городов, вы обновляете значение зоны в состоянии.Это приведет к ошибке.Попробуйте исправить это, установив другое значение в состоянии и проверив это значение для выпадающего списка города

Образец

render() {
    const { zone, selectedZone, selectedCity } = this.state
    return (
      <Screen>
        <DropDownMenu
            styleName="horizontal"
            options={zone}
            selectedOption={selectedZone || zone[0]}
            onOptionSelected={(zone) => 
              this.setState({ selectedZone: zone, selectedCity: zone.children[0] } )
            }
            titleProperty="brand"
            valueProperty="cars.model"
        />
        <Text styleName="md-gutter-horizontal">
            {selectedZone ?
            selectedZone.models.description :
            this.state.zone[0].models.description}
        </Text>
       <DropDownMenu
            styleName="horizontal"
            options={selectedZone ? selectedZone.children : zone[0].children } // check if zone selected or set the defaul zone children
            selectedOption={selectedCity || zone[0].children[0] } // set the selected city or default zone city children
            onOptionSelected={(city) => this.setState({ selectedCity: city })} // set the city on change
            titleProperty="name"
            valueProperty="cars.model"
        />
      </Screen>
    );
  }