La modifica dello stato di reazione non è il rendering

Question

Sono abbastanza nuovo su React e sto riscontrando un problema in cui il mio stato iniziale viene eseguito il rendering, ma quando lo stato viene modificato tramite la chiamata AJAX (riuscita) non causa il rendering della funzione . Quindi, ciò che accade è che 'getInitialState' imposta un elenco statico di categorie e 'componentDidMount' ottiene un nuovo elenco dalla mia API. La chiamata viene eseguita correttamente e genera un successo, quindi non so perché il menu a discesa non viene aggiornato.

var Dropdown = React.createClass({ 
    getInitialState: function() { 
     return { 
     listVisible: false, 
     display: "" 
     }; 
    }, 

    select: function(item) { 
     this.props.selected = item; 
    }, 

    show: function() { 
     this.setState({ listVisible: true }); 
     document.addEventListener("click", this.hide); 
    }, 

    hide: function() { 
     this.setState({ listVisible: false }); 
     document.removeEventListener("click", this.hide); 
    }, 

    render: function() { 
     return <div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}> 
     <div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={this.show}> 
      <span>{this.props.selected.name}</span> 
      <i className="fa fa-angle-down"></i> 
     </div> 
     <div className="dropdown-list"> 
      <div> 
      {this.renderListItems()} 
      </div> 
     </div> 
     </div>; 
    }, 

    renderListItems: function() { 
     var categories = []; 
     for (var i = 0; i < this.props.list.length; i++) { 
     var category = this.props.list[i]; 
     categories.push(<div onClick={this.select.bind(null, category)}> 
      <span>{category.name}</span> 
      <i className="fa fa-check"></i> 
     </div>); 
     } 
     return categories; 
    } 
    }); 

var GridFilter = React.createClass({ 
getInitialState: function() { 
    return {categoryList: [{ 
    name: "Cat1", 
    value: "#F21B1B" 
    }, { 
    name: "Cat2", 
    value: "#1B66F2" 
    }, { 
    name: "Cat3", 
    value: "#07BA16" 
    }] }; 
}, 
getCategories: function() { 

    var nextPage = 1; //increase the page count 
    ajax_url = "http://127.0.0.1:8200/api/categories/"; 
    ajax_type = "GET"; 
    ajax_data = {}; 

    $.ajax({ 
    url: ajax_url, 
    type: ajax_type, 
    contentType: 'application/x-www-form-urlencoded', 
    data: ajax_data, 
    dataType: 'json', 

    success: function(data) { 
    this.setState({ 
     data: this.state.categoryList, 
    }); 
    //loading("off"); 
    }.bind(this), 
    error: function(xhr, status, err) { 
    console.error(this.props.url, status, err.toString()); 
    }.bind(this) 

    }); 

}, //end function 
componentDidMount: function() { 
    this.getCategories(); 
}, 
render: function() { 
    return (
    <div id="filter-bar" className="stamp"> 
     <Dropdown list={this.state.categoryList} selected={this.state.categoryList[0]} /> 
     <p className="filter-select">Categories <i className="fa fa-angle-down"></i></p> 
     <p className="filter-select">Type <i className="fa fa-angle-down"></i></p> 
     <p className="filter-text">Filters:</p> 

    </div> 
); 
} 
}); 

Answer 1

se stai cercando di cambiare lo stato categoryList con i tuoi dati in entrata è necessario modificare il tuo stato insieme a

this.setState({ 
    categoryList: data, 
}); 

quello che stai facendo attualmente è l'aggiunta di uno stato i dati chiave (anche se non c'è no chiave data nella funzione getInitialState). e dal momento che non stai utilizzando this.state.data ovunque, non sta cambiando nulla, e quindi il tuo ui non sembra essere aggiornato