React select - 他の選択フィールドの選択されたオプションに基づいて選択をフィルタリングする方法？

Question

私は反応選択を使用しており、2つのフィールドに一致する都市のペア（特定の起点には特定の目的地のみが表示されます）を表示したいとします。私はたくさんのことを考えていましたが、起点選択フィールドで選択されたものに基づいて宛先選択フィールドをフィルタリングする方法を思いつくことはできません。誰でもアイデアやチップを持っていますか？ありがとう!!

私の応答はオブジェクトを含む配列です。各オブジェクトは、（とりわけ）起点都市と目的地の都市を持っています

... 
{OriginDestinationLocations:{DestinationLocation:{CityName:'Orlando'}, OriginLocation:{CityName:'Miami'}}}, 
{OriginDestinationLocations:{DestinationLocation:{CityName:'Orlando'}, OriginLocation:{CityName:'Chicago'}}}, 
{OriginDestinationLocations:{DestinationLocation:{CityName:'Las Vegas'}, OriginLocation:{CityName:'Miami'}}} 
.... 
// so here (pretending that would be the full list) when I pick Orlando as origin in the 1st selection field, I should only see Miami and Chicago in the second field. 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     from:[], 
     to:[] 
    } 
    } 
componentDidMount() { 
    cityPairs().then(response => { 
     let from = []; 
     let to = []; 
    // here its wrong to separate destination and origin as origin needs to stay 'connected' to the matching destinations but I just don't know what else to do. if I push objects with always matching origins/destinations into 1 array, I was thinking it would create so many pair, that can't be right in terms of performance etc. or would that be the only way? 
     for (var i = 0; i < response.length; i++) { 
      from.push(response[i].DestinationLocation.CityName); 
      to.push(response[i].OriginLocation.CityName); 
     } 
     this.setState({ 
      to: to, 
      from: from 
     }) 
    }) 
} 

handleChange(event) { 
    this.setState({value: event.target.value}); 
} 
render(){ 
    return (
    <div> 
     <Select 
      name="form-field-name" 
      value={this.state.value} 
      onChange={this.handleChange} 
      clearable={this.state.clearable} 
      searchable={this.state.searchable} 
      labelKey='name' 
      valueKey='cityCode' 
      options={this.state.to} 
     /> 
    </div> 
) 
} 
} 

-addedパーツ：

cityPairs().then(response => { 
     this.setState({ 
      routes: response 
       .reduce((dest, x) => Object.assign({}, dest, { 
        ... 
       }), {}) 
     }); 
    }).then(res => { 
     var result = []; 
     var r = this.state.routes; 
     for (var key in r) { 
      result.push(key) 
     } 
     this.setState({ 
      originRoutes: result.map(x => ({ 
       name: x, 
       value: x 
      })) 
     }) 
    }) 

//as I believe const routes = this.state.routes[this.state.selected]; should be changed to 

const originRoutes = this.state.originRoutes[this.state.selected]; 
    const options = !originRoutes ? [] : originRoutes.map(x => ({ 
     name: x, 
     value: x 
})); 

      <Select    
       onChange={this.onChange} 
       options={this.state.originRoutes} 
      /> 
      <Select     
       onChange={this.onChange} 
       options={options} 
      /> 

Answer 1

何このソリューションは、今含まれていませんが、何度も何度もリクエストを送信しています。最初にAPIからデータをロードするだけです。しかし、これはAPI自体が現在どのように機能しているのかと思います。データが大きすぎる場合は変更する必要があります。

class App extends React.Component { 
    componentWillMount() { 
     this.setState({ 
      routes: [] 
     }); 

     cityPairs().then(response => { 
      // result is an object with a key of the origin name and a list of destination names 
      this.setState({ 
       routes: response 
        .reduce((dest, x) => Object.assign({}, dest, { 
         // multiple lines at best :-D 
         [x.OriginLocation.CityName]: dest[x.OriginLocation.CityName] ? dest[x.OriginLocation.CityName].concat([x.DestinationLocation.CityName]) : [x.DestinationLocation.CityName] 
        }), {}) 
      }); 
     }); 
    } 

    onChange(event) { 
     this.setState({ 
      selected: event.value 
     }) 
    } 

    render() { 
     const routes = this.state.routes[this.state.selected]; 
     const options = !routes ? [] : routes.map(x => ({ 
      name: x, 
      value: x 
     })); 

     return(
      <div> 
       <Select 
        ... 
        onChange={::this.onChange} 
        options={options} 
       /> 
      </div> 
     ); 
    } 
}