Update выберите реагируют с другого выбора опции

Question

Я пытаюсь обновить мой город выбрать из выбранного состояния, но город не обновляется при изменении состояния:

Вот часть моего кода визуализации:

<div> 
    <label for="state">state:</label> 
      <SelectInput items="RO-DF-RS-SP-RJ-MG-PR" onChange={this.handleChange} name="state"/> 
       </div> 
       {!!this.state.stt && 
        (
         <div> 
          <label for="city">city:</label> 
          <SelectInput url="/static/json/" filename={this.state.stt} onChange={this.props.onChange} name="city"/> 
         </div> 
        ) 
       } 
<div> 

this.props.onChange только обработчик, чтобы получить значение входных данных для сохранения данных в базе данных

И код:

handleChange(event){ 
    if(event.target.name == "state"){ 
     this.setState({ 
      stt: event.target.value 
     }); 
    } 
    if(this.props.onChange) { 
     this.props.onChange(event); 
    } 
} 

устанавливает правильное состояние (this.state.stt)

Вот мой SelectInput:

class SelectInput extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      select: "", 
      items: [], 
      filename: this.props.filename 
     } 
     this.handleChange = this.handleChange.bind(this) 


    } 

    componentDidMount(){ 
     if(this.props.filename){ 
      console.log(this.props.filename); 
     } 

     if(this.props.items){ 
      this.setState({ 
       items: this.props.items.split("-") 
      }) 
     } 
     else if(this.props.url && this.props.filename){ 
      $.ajax({ 
       type: 'GET', 
       url: `${this.props.url}${this.props.filename}.json`, 
       headers: { 'Authorization': "Token " + localStorage.token }, 
       success: (result) => { 
        this.setState({ 
         items: result.child 
        }) 
       }, 
       error: function (cb) { console.log(cb) } 
      }); 
     } 
    } 

    handleChange(event){ 
     this.setState({ 
      select: event.target.value 
     }); 
     if(this.props.onChange) { 
      this.props.onChange(event) 
     } 
    } 

    render(){ 
     return (
      <select name={this.props.name} value={this.state.select} onChange={this.handleChange}> 
       <option value=""></option> 
       {this.state.items && this.state.items.map(item => 
        <option value={item}>{item}</option> 
       )} 

      </select> 
     ) 
    } 


} 

export default SelectInput 

Любая идея, чтобы решить мою проблему?

Answer 1

Поскольку вы устанавливаете filename динамически, вам необходимо реализовать componentWillReceiveProps, который сделает запрос ajax для загрузки нового файла.

componentWillReceiveProps({ filename }) { 
    if(filename !== this.props.filename) { 
    this.loadItems(filename) 
    } 
} 

loadItems(filename) { 
    $.ajax({ 
     type: 'GET', 
     url: `${this.props.url}${filename}.json`, 
     headers: { 
     'Authorization': "Token " + localStorage.token 
     }, 
     success: (result) => { 
     this.setState({ 
      items: result.child 
     }) 
     }, 
     error: function(cb) { 
     console.log(cb) 
     } 
    }); 
}