Ich versuche, Daten in einer Komponente einer React-Anwendung erhalten übergeben. Bei Erfolg nehme ich die empfangenen Daten und setze den Zustand und versuche dann, diese Daten als eine Eigenschaft der nächsten Komponente zu übergeben. Sobald ich innerhalb der zweiten Komponente bin, muss ich auf die übergebenen Daten über this.state
zugreifen, damit ich später den Status in dieser Komponente ändern kann. Es scheint, dass ein Problem mit dem DOM-Rendering auftritt, bevor die Daten vom Dienst empfangen werden. Ich habe versucht, ein bereits geladenes Array von Werten anstelle von this.state.data
in <List data={this.state.data}/>
zu übergeben und es scheint gut zu funktionieren. Wie kann ich sicherstellen, dass ich die Daten vom Dienst erhalten habe, bevor ich das DOM rendere, so dass die Daten vollständig an die einzelnen Komponenten weitergegeben werden.Übergeben von Ajax/Dienstdaten zwischen Komponenten in React.js
EDIT: vollständige Umsetzung des Listenelement hinzugefügt, so die Verwendung von this.state Diese
erklären, ist im Grunde, was ich zu tun versucht:var Box = React.createClass({
getInitialState: function() {
return {data: []};
},
loadTodosFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'GET',
cache: false,
success: function(dataResponse) {
this.setState({data: dataResponse});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadFromServer();
},
render: function() {
return (<List data={this.state.data}/>);
}
});
var List = React.createClass({
getInitialState: function() {
return {data: this.props.data};
},
dragStart: function(e) {
this.dragged = e.currentTarget;
e.dataTransfer.effectAllowed = 'move';
// Firefox requires dataTransfer data to be set
e.dataTransfer.setData("text/html", e.currentTarget);
},
dragEnd: function(e) {
this.dragged.style.display = "block";
this.dragged.parentNode.removeChild(placeholder);
// Update data
var data = this.state.data;
var from = Number(this.dragged.dataset.id);
var to = Number(this.over.dataset.id);
if(from < to) to--;
if(this.nodePlacement == "after") to++;
data.splice(to, 0, data.splice(from, 1)[0]);
this.setState({data: data});
},
dragOver: function(e) {
e.preventDefault();
this.dragged.style.display = "none";
if(e.target.className == "placeholder") return;
this.over = e.target;
// Inside the dragOver method
var relY = e.clientY - this.over.offsetTop;
var height = this.over.offsetHeight/2;
var parent = e.target.parentNode;
if(relY > height) {
this.nodePlacement = "after";
parent.insertBefore(placeholder, e.target.nextElementSibling);
}
else if(relY < height) {
this.nodePlacement = "before"
parent.insertBefore(placeholder, e.target);
}
},
render: function() {
var results = this.state.data;
return (
<ul>
{
results.map(function(result, i) {
return (
<li key={i}>{result}</li>
)
})
}
</ul>
);
}
});
ReactDOM.render(
<Box url="/api/comments"/>, document.getElementById('content')
);
Haben Sie den Zustand in der List-Komponente ändern? – KumarM
@kumarm Ja, das war meine Absicht, als ich mich dafür entschied, this.state.data – NightMarcher