React non esegue nuovamente il rendering dopo setState utilizzato nella promessa

Question

Ogni volta che gli oggetti di scena vengono modificati, il componente chiama suTermChange e ottiene i dettagli per questo componente con una promessa che restituisce una serie di oggetti.

Il problema è che quando viene chiamato setState, non accade nulla e il componente non viene ricreato con dettagli nuovi.

module.exports = React.createClass({ 
displayName: 'TaxonomySelect', 

getInitialState: function() { 
    return { 
     children: undefined 
    }; 
}, 

componentDidMount: function() { 
    this.onTermChange(this.props.term); 
}, 

componentWillReceiveProps: function (nextProps) { 
    this.props.term = this.props.term || null; 

    if (this.props.term) { 
     this.onTermChange(nextProps.term.id); 
    } else { 
     this.onTermChange(nextProps.term); 
    } 
}, 

onTermChange: function (term) { 
    this.setState({children: undefined}); 

    TaxonomyStore.getTerm(this.props.term) 
     .bind(this) 
     .then(function (term) { 
      TaxonomyStore.merge(9999,{ 
        description: 'No specific topic', 
        id: 9999 
      }); 
      if (term.path && term.path.length === 3) { 
       term.children.unshift(TaxonomyStore.get(9999)); 
      } 

      console.log(term.id, term.children); 

      this.setState({children: term.children}); 
      this.forceUpdate(); 
      this.render(); 
     }); 
}, 

onSelect: function (id) { 
    if (this.props.onChange) { 
     this.props.onChange(TaxonomyStore.get(id)); 
    } 
}, 

render: function() { 
    if (!Array.isArray(this.state.children) || this.state.children.length < 1) { 
     return null; 
    }; 

    var options = this.state.children.map(function (term) { 
     return { 
      value: term.id.toString(), 
      label: term.description 
     }; 
    }); 

    var value = this.props.value && this.props.value.toString(); 

    return (
     <div> 
      <Select name={this.props.name} value={value} options={options} onChange={this.onSelect} /> 
     </div> 
    ); 
} 
}); 

Answer 1

Non dovrebbe essere necessario chiamare this.forceUpdate() se si sta chiamando this.setState. Inoltre, non chiamare mai il metodo render di un componente.

È difficile dire perché non sta eseguendo il rerendering, ma vorrei alcune istruzioni debugger per vedere se render viene chiamato. Immagino che chiamare sempre this.onTermChange in componentWillReceiveProps potrebbe essere un potenziale problema.

Answer 2

Quando si chiama this.setState({children: term.children});this è uguale alla funzione in cui è stato definito, non al componente di reazione.

Probabilmente si verifica un'eccezione, ma la tua promessa non chiama .error per intercettarlo e registrarlo.

Answer 3

Mi sono imbattuto nello stesso problema, ispirato da @ z5h, utilizzo un locale locale per fare riferimento a this al di fuori di Promise e funziona!

Nel tuo caso:

onTermChange: function (term) { 
    this.setState({children: undefined}); 

    let _this = this; // change 
    TaxonomyStore.getTerm(this.props.term) 
     .bind(this) 
     .then(function (term) { 
      TaxonomyStore.merge(9999,{ 
        description: 'No specific topic', 
        id: 9999 
      }); 
      if (term.path && term.path.length === 3) { 
       term.children.unshift(TaxonomyStore.get(9999)); 
      } 

      console.log(term.id, term.children); 

      _this.setState({children: term.children}); //change 

     }); 
} 

più su this in js: How does the “this” keyword work?