React.js: laden von JSON-Daten mit Fetch API und Requisiten aus object-array

Völlig neue react.js und nachdem Sie durch das tutorial und Lesen in der Dokumentation nach, ich bin immer noch am kämpfen ein bisschen mit js abrufen zu laden meine Daten aus einer JSON-Datei sowie das festlegen von Eigenschaften aus einem array von Objekten. Ich bin mir auch nicht sicher, ich bin Zugriff auf DOM-Eigenschaften korrekt in meinem event-handler. Ich muss fehlt etwas eher unkompliziert.

Referenz, hier mein code mit dem rest des Projekts und hier ist, was es Aussehen soll.

ETA: ich hatte keine Ahnung von den docs, dass babel browser veraltet, so beschlossen Sie, nur mit geraden Javascript mit ES5-syntax anstelle von JSX. Code aktualisiert unter, aber es ist immer noch nicht das Rendern des Markups.

JS:

var CanvasAnimation = React.createClass({
    getInitialState: function() {
        return {data: []};
    },                            
    loadData: function() {
        /*
        fetch("data.json")
            .then(function(response) {
                return response.json    
                    .then(function(json){
                        this.setState({data: json});
                    }.bind(this))
            }.bind(this));
        */
        const data = [
            { id: "stalkerOne", width: 225, height: 434, spriteSheetURL: 'spriteSheets/stalkerone.jpg', rows: 5, columns: 5, totalFrames: 24 },
            { id: "stalkerTwo", width: 175, height: 432, spriteSheetURL: 'spriteSheets/stalkertwo.jpg', rows: 6, columns: 5, totalFrames: 26 },
            { id: "stalkerThree", width: 251, height: 432, spriteSheetURL: 'spriteSheets/stalkerthree.jpg', rows: 6, columns: 5, totalFrames: 28 }
        ];
    },
    componentDidMount: function() {
        this.loadData();
    },
    componentDidUpdate: function() {
        function animation(json) {
            return json.map(function(data) {
                return(
                    new CanvasSprite(
                        document.getElementById(data.id),
                        data.width,
                        data.height,
                        data.spriteSheetURL,
                        data.rows,
                        data.columns,
                        data.totalFrames)
                );
            });
        };
        this.setState({animaton: animation(this.state.data)});  
    },
    handleInteraction: function(event, index) {
        var offsetY = event.clientY - event.node.getBoundingClientRect().top;
        var relY = offsetY/this.state.data.height;
        this.props.animation[index].setFrame(relY);
    },
    render: function() {
        var canvases = this.state.data.map(function(data, index) {
            return (
                React.createElement('canvas', 
                                    id = data.id,
                                    width = data.width,
                                    height = data.height,
                                    style = 'border:5px solid white',
                                    onMouseOver= this.handleInteraction(event, index))
            );
        });
        return(
            React.createElement('div', canvases)
        );
    }
});
  
    
ReactDOM.render(
    React.createElement(CanvasAnimation, null),
    document.getElementById('content')
);

Sie nicht angegeben haben, in Ihre Frage, was das problem war.
Sieht aus wie Sie einen syntax Fehler hier aber this.setState({data: json, animation()}); Fehlt ein Schlüssel hier?
Das problem ist weder der Staat noch die Requisiten scheinen tatsächlich eingestellt werden, und das markup ist nicht Rendern. Und Sie sagen, der Schlüssel (data in diesem Fall) muss vorgegeben werden? Ich sehe das nicht getan wird, in der Beispiele noch auf die in der Dokumentation.
Nein, ich meine, Sie haben die Funktion animation() in einem Objekt ohne Schlüssel das ist nicht legal javascript-code.. meinst du { data: json, canvas: animation() }. Bei näherer Betrachtung Ihre animation Funktion nichts zurückgibt
Sind Sie nicht immer alle Fehler in der browser-Konsole?
Ugh, danke. Aktualisiert im snippet. Es ist noch nicht gerendert alles, obwohl. Und sehr schwierig zu sagen, was das Problem ist aufgrund von Babel.
Wenn das war nicht klar, Babel wirft den Fehler also ich kann nicht sagen, was JSX entspricht.
Lassen Sie uns weiter, diese Diskussion im chat.
Es gibt keine dieser.Requisiten.animation,aber das.Zustand.animation.
mein Verständnis war das zweite argument von setState() setzt den Requisiten. Es ist eindeutig etwas mehr, das fehlt mir hier.
setState ändern.Staat,nicht diese.Requisiten
laut der docs das erste argument setzt den Zustand und eine optionale zweite stellt die Requisiten. Alternativ, wie gehen Sie Requisiten statt mit setState?
setState können nur die Wirkung dieser.Staat soweit ich weiß.Kann u geben Sie mir die doc-link u erwähnt.
setState(function(previousState, currentProps) {...}),ich denke, u erwähnt-code ist wie folgt.Auch wenn dieser Stil,Funktion setState wird sich noch ändern die das.Zustand mit dem Ergebnis der Funktion als argument.
Dies ist, was ich meinte: "Es ist auch möglich, übergeben eine Funktion mit der Signatur function(Staat, Requisiten)." Du hast Recht, ich war eindeutig verwirrt hier und es hilft dabei nicht, dass die einzige Antwort, die ich erhalten habe verwendet, setState auf diese Weise.
Also...wie würde ich mich über die Einstellung sowohl die Daten als array zu Rendern mein markup mit UND meine object-array zum Steuern der animation in der jede Leinwand einzeln? Derzeit kann ich es Rendern nur in codepen (die einzige Art, wie ich erklären kann, ist, dass es verwendet babel-standalone statt babel-core) und nicht auf die Objekt-Methode setFrame() unabhängig davon, ob ich this.props.animation oder this.state.animation. Ich habe einen link zu dem, was das Ergebnis sollte Aussehen wie in meiner Frage.
Scheint, wie ich sein sollte ruft this.setState(data: animation(json)) und dann this.state.data.CanvasSprite.setFrame() und ändern meine animation-Funktion zur Rückgabe eines Daten-array enthält eine CanvasSprite Objekt? Oder wird this.setState(data: json, animation: animation(json)) automatisch anzeigen die json-Datei in mein data-array und fügen Sie dann ein weiteres element, um den Staat als animation, die aus einem CanvasSprite Objekt? Denn das ist zurzeit nicht funktioniert...
Hier ist ein codepen, wo es zumindest nicht Rendern: codepen.io/anon/pen/wWvqrV?Redakteure=0011. Aber es wirft Fehler, ich bin nicht die Schlüssel für meine Daten-array in der Erwägung, dass mein Verständnis ist, dass mithilfe von eindeutigen ids für jede Leinwand muss ausreichen, als ein-Taste. Und immer noch keine animation...
Lassen Sie uns weiter, diese Diskussion im chat.

InformationsquelleAutor Sophia Gold | 2016-05-28

23

Jede Menge syntax-Fehler in Ihrem code, ich habe die Feste für Sie aus.
```
const { Component } = React;
const { render } = ReactDOM;

class CanvasAnimation extends Component {
  state = {
    data: []
  };

  loadData() {
    function animation(json) {
      return json.map(function(data) {
        return (
          new CanvasSprite(
            document.getElementById(data.id),
            data.width,
            data.height,
            data.spriteSheetURL,
            data.rows,
            data.columns,
            data.totalFrames
          )
        );
      });
    }
    fetch("data.json")
      .then(response => response.json())
      .then(json => {
        console.log(json);
        this.setState({
          data: json,
          animation: animation(json)
        });
      });
  }

  componentDidMount() {
    this.loadData();
  }

  handleInteraction(e) {
    var offsetY = e.clientY - e.node.getBoundingClientRect().top;
    var relY = offsetY/this.state.data.height;
    this.props.animation.setFrame(relY);
  }

  render() {
    var canvases = this.state.data.map(function(data) {
      return (
        <canvas
          id={data.id} 
          width={data.width} 
          height={data.height}
          style={{border: '5px white'}}
          onMouseOver={this.handleInteraction}
        />
      );
    });

    return (
      <div>{canvases}</div>
    );
  }
}

render(
  <CanvasAnimation />,
  content
);
```
Ich weiß nicht, die Antwort von der API, also bin ich nicht sicher, ob es die anderen zu beheben.

Einige der Probleme, die ich bemerkt habe:
- Wohl deine Einrückung ist falsch, denn Sie hatte Funktionen mit Doppel - return Aussagen. Ich schlage vor, Sie zu aktivieren ESLint in Ihre IDE zu fangen, diese Fehler.
- Du hast nicht verstanden, wie setState funktioniert, können Sie nicht nur:
```
this.setState({
  foo: 'bar',
  baa: myFn(this.state.foo)
});
```
  Ansonsten this.state.foo innen myFn beziehen sich auf den alten Wert, und nicht die neuen, die Sie jetzt ist.
  
  Sie würde tun müssen this.setState({foo: 'bar'}, () => this.setState({baa: myFn(this.state.foo)}), aber es ist besser zu tun, als habe ich in den code habe ich fest vor.
- Das problem war, dass ich function animation(){ this.state.data.map() } statt function animation(json){ json.map() }, das macht viel mehr Sinn. Aber das sollte nur Effekt-Requisiten, nicht Zustand. Ich setzen Sie Grenzen rund um die Leinwände, so dass ich sagen könnte, wenn Sie mindestens rendering, unabhängig von den Requisiten, set, und Sie sind es nicht. Es ist nicht Rendern.
- Sie haben EINE MENGE syntax-Fehler, nicht nur das problem mit der animation-Funktion. Beheben Sie alle von Ihnen mit einem linter, Ihre Seite wird dann wohl machen.
- Ich habe gerade einfügen in Ihren code. Der code, den Sie schrieb, um diese Frage zu beantworten ist nicht Rendern.
- Sorry, SO ist nicht ein Ort, wo Sie Fragen für ein code geschrieben werden, und Sie bekommen es. Ich gab dir Hinweise und Antworten, um Ihnen helfen, Ihren code zu erhalten, um zu arbeiten. Das ist alles.
- Ich habe nicht gefragt, wer zu umschreiben, meinen code für mich, aber Sie Tat es. Sie beantwortet diese Frage, indem Sie umschreiben alle den code, der nicht funktioniert also, wenn es nicht Rendern und wirft Fehler, weil eine Menge syntax-Fehler, dann können Sie Ihre syntax-Fehler. Dies ist nicht eine Antwort auf eine Frage...es ist halt anders-code, der nicht funktioniert. Also ich denke, jetzt habe ich die Wahl, weiterhin zu debug-mine oder der Wechsel zu Debuggen getauscht?
- Ich würde behaupten, dass DAMIT nicht ein Ort, wo anstatt der Beantwortung spezifischer Fragen mündlich, schreiben Sie einen neuen code-Beispiel, das gar nicht laufen.
- Ich habe nur Feste Ihrem code und verwendet ES6-syntax um es einfacher zu machen, zu Lesen, es ist immer noch dein code. Es muss nicht Rendern, weil mein snippet hat nicht den Zugriff auf Ihre API
- Es gibt keine API. Gibt es ein Skript, mit einem JS-Klasse, macht sprite basierte Animationen, eine JSON-Datei mit den Daten, und drei Bilder. In der Frage habe ich einen link zu meinem code in der Projekt-Datei als auch als ein weiteres Projekt läuft genau so, wie ich versuche, dies mit Ausnahme der Verwendung einer Template-framework. Ich habe dann eine Dritte link im ersten Kommentar Ihre Antwort zeigt, dass Sie Ihren code einbauen mine und noch nicht ausgeführt werden. Ich habe buchstäblich, sofern das gesamte Projekt und dann wieder ein Beispiel-Projekt mit dem code. Beide werfen Fehler und nicht sogar dazu führen, dass die Leinwände.
- Sorry, es ist schwer zu Debuggen, kompilierter code, wie der link, den Sie zur Verfügung gestellt haben. Viel von dem code in Ihrem Skript fehlt, also habe ich keine Idee, wie es Aussehen sollte. Hier ist ein codepen mit einer funktionierenden version von deinem script, sondern es findet eine Menge von teilen, die haben Sie nicht codepen.io/FezVrasta/pen/OXJmRN?Redakteure=0010
- FYI...das Problem ist hier, dass läuft auf codepen node.js und daher nutzt das babel-standalone statt babel-core, das ist offensichtlich sehr anders und erklärt, warum dieser jsx nicht kompilieren korrekt auf der client-Seite.
- Ich verwenden die gleiche syntax auf meinen Projekten und es funktioniert einwandfrei
- Es ist nicht ES6-syntax, ist es etwas anderes. Welche version von babel-core-verwenden Sie auf client-Seite? das Beispiel, Das ich gepostet, wo dein code wirft Fehler verwendet die neuesten verfügbaren auf cdnjs.
- Auch, wenn ich die animationEngine.js Datei aus meinem Beispiel zu Ihrem codepen ich kann immer noch nicht auf die eine Methode, von der es die ich brauche: setFrame(). Jemand bemerkte ich mit sollte dieser.Zustand.animation, statt dieser.Requisiten, aber das scheint nicht richtig zu mir und ist nicht einen Unterschied machen. Babel Fragen beiseite, hier ist eine Gabel von Ihrem codepen, dass sollte zeigen das Verhalten, verbunden mit meiner Frage, aber nicht: codepen.io/anon/pen/wWvqrV?Redakteure=0011
- Zur info...dieses ganze Thema ist, weil die docs verlassen Sie sich auf die veralteten babel-browser und machen keine Erwähnung von webpack. Deshalb habe ich erst realisiert, nachdem einige Tage verschwendet, das, Sie sind mit webpack zu kompilieren, jsx und das ist, warum es funktioniert nicht für mich. Wir entschuldigen uns für jegliche Reibung dieser erstellt. Obwohl ich wünschte, Sie hatte nur sah die Beispiel-link in meine Frage und sagte mir, zu beginnen mit...
- Tut mir Leid für diese, aber die Standard-stack-wenn jemand entwickelt mit React.js ist webpack + babel, das ist, warum habe ich nicht erwähnt.
- Genau. Es ist selbstverständlich...aber nirgends erwähnt in der Dokumentation. In der Tat, das tutorial Sie haben bis ihm widerspricht, durch Verwendung einer veralteten version von babel browser. Es gibt eine ganze Frage-thread auf github darüber, wie die docs wurden überholt für über ein Jahr jetzt, und fb ist, ziehen Ihre Füße kommen mit einem Ersatz-browser-version, anstatt nur darum, gemeinsam ein Lernprogramm zur Verwendung von webpack mit reagieren (das ist nicht unbedingt offensichtlich, aber ich fand ein Beispiel-Projekt).
- Außerdem glaube ich herausgefunden habe, der Grund meiner CanvasSprite Objekte waren nicht instanziieren, weil setState() löst das Rendern nochmal so ein Dokument.getElementByID() funktioniert nicht. Ich brauche, um den Staat zuerst in componentDidMount dann die Requisiten, die später in componentShouldUpdate. Ich werde diese zusammen als eine Antwort sobald ich kann webpack laufen und testen Sie es.
InformationsquelleAutor Fez Vrasta

Ok... Hier ist die Arbeits-Projekt. Bekam etwas Hilfe von @gumingfeng und @hkal.

Lektionen gelernt:

Reagieren die docs sind lächerlich veraltet.
Gerade JS vs. JSX ist wirklich nicht schlechter imo.
Korrigiert einige syntax-Fehler in zu Holen.
Object-array muss instanziiert werden nach Daten geladen sind, um pass-DOM-Referenzen in der Konstrukteurswertung.
Jedoch Berufung setState() innen componentDidUpdate() löst eine unendliche Schleife, so musste das Objekt-array direkt und unabhängig vom Staat.
Beim erstellen von DOM-Elementen aus einem array, Reagieren nicht automatisch eine Zuordnung der event handler für das jeweilige element. In anderen Worten, es muss weitergegeben werden, der array-index kann verwendet werden, um die Werte in den arrays.

Puh, ich denke, das ist es. Hoffe, das hilft anderen.

Ich möchte nur abschließend sagen, geben zu Reagieren versuchen, ohne JSX. Es ist wirklich nicht so schlecht 🙂

JS:

const { Component } = React;
const { render } = ReactDOM;

class CanvasAnimation extends Component {
    
    constructor(){
        super();
        this.state = {
            data: []
        };
    };
    
    componentDidMount() {
        fetch("data.json")
            .then( (response) => {
                return response.json() })   
                    .then( (json) => {
                        this.setState({data: json});
                    });
    };
    
    componentDidUpdate() {
        function animation(json) {
            return json.map( (data) => {
                return(
                    new CanvasSprite(
                        document.getElementById(data.id),
                        data.width,
                        data.height,
                        data.spriteSheetURL,
                        data.rows,
                        data.columns,
                        data.totalFrames)
                );
            });
        };
        //this.setState({animation: animation(this.state.data)}); //causes infinite loop
        this.animation = animation(this.state.data);
    };
    
    handleInteraction(event, index) {
        var offsetY = event.clientY -  document.getElementById(this.state.data[index].id).getBoundingClientRect().top;
        var relY = offsetY/this.state.data[index].height;
        this.animation[index].setFrame(relY);
    };
    
    render() {
        var canvases = this.state.data.map( (data, index) => {
            return (
                React.createElement('canvas', 
                                    {id : data.id,
                                    width : data.width,
                                    height : data.height,
                                    //style : {border: '5px solid white'},
                                    onMouseMove : (event) => this.handleInteraction(event, index)}
                                    )
            );
        });
        return(
            React.createElement('div', null, ...canvases)
        );
    };
    
};
  
    
render(
    React.createElement(CanvasAnimation, null),
    document.getElementById('content')
);

Dies ist die Antwort, die half mir am meisten. Aufruf der fetch-direkt aus componentDidMount() löst das Problem der undefinierten this frustration

InformationsquelleAutor Sophia Gold

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.