Lasciatemi prefigurare ciò dicendo che sono un principiante di ReactJS. Sto cercando di imparare creando un sito semplice che popola i dati usando React. Ho un file JSON che contiene dati di collegamento che verranno collegati in loop con la mappa.ReactJS this.state null
ho provato a fissare come lo stato dei componenti poi passarlo ai collegamenti della barra di navigazione tramite un oggetto di scena ma sto ricevendo "TypeError Uncaught: Impossibile leggere la proprietà 'dati' di null"
Ho provato a cercare in giro per il soluzioni ma non riusciva a trovare nulla.
Nota: quando provo a codificare un oggetto e a mapparlo in questo modo, restituisce una mappa non definita. Tuttavia non sono sicuro che sia direttamente correlato all'errore setState.
/** @jsx React.DOM */
var conf = {
companyName: "Slant Hosting"
};
var NavbarLinks = React.createClass({
render: function(){
var navLinks = this.props.data.map(function(link){
return(
<li><a href={link.target}>{link.text}</a></li>
);
});
return(
<ul className="nav navbar-nav">
{navLinks}
</ul>
)
}
});
var NavbarBrand = React.createClass({
render: function(){
return(
<a className="navbar-brand" href="#">{conf.companyName}</a>
);
}
});
var Navbar = React.createClass({
getInitalState: function(){
return{
data : []
};
},
loadNavbarJSON: function() {
$.ajax({
url: "app/js/configs/navbar.json",
dataType: 'json',
success: function(data) {
this.setState({
data: data
});
console.log(data);
console.log(this.state.data);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function(){
this.loadNavbarJSON();
},
render: function(){
return(
<nav className="navbar navbar-default navbar-fixed-top" role="navigation">
<div className="container-fluid">
<div className="navbar-header">
<NavbarBrand />
</div>
<NavbarLinks data={this.state.data} />
</div>
</nav>
);
}
});
var Header = React.createClass({
render: function(){
return(
<Navbar />
);
}
});
React.renderComponent(
<Header />,
document.getElementById('render')
);
hai sbagliato a digitare 'getInitialState' (ti manca l''i' subito dopo la t in iniziale) – trekforever
Sembra che @trekforever abbia trovato il tuo problema. Come a parte, 'console.log (this.state.data)' probabilmente non stamperà i risultati corretti, poiché React accoderà la chiamata 'setState'. Se vuoi stampare il tuo stato dopo una chiamata a 'setState' devi fornire un callback: ' this.setState ({something: 'blah'}, function() {console.log (this.state.something); }); ' – edoloughlin
@trekforever DERP, grazie! –