React.js: chargement des données JSON avec Fetch API et des accessoires à partir de l'objet array

Totalement nouveau pour react.js et après avoir traversé le tutoriel et la lecture de la documentation, je suis toujours un peu en difficulté avec l'utilisation de js chercher à charger mes données à partir d'un fichier JSON ainsi que la définition des propriétés d'un tableau d'objets. Je ne suis pas certain que je suis accéder à des propriétés DOM correctement dans mon gestionnaire d'événement. Je doit manquer quelque chose d'assez simple.

De référence, voici mon code avec le reste du projet et voici ce qu'il est censé ressembler.

ETA: je n'avais aucune idée de la docs que babel navigateur est obsolète donc décidé de l'utiliser directement en Javascript avec ES5 syntaxe au lieu de JSX. Code de mise à jour ci-dessous, mais il n'est toujours pas rendu le balisage.

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')
);

  • Vous ne précisez pas dans votre question quel était le problème.
  • On dirait que tu as une erreur de syntaxe ici bien this.setState({data: json, animation()}); Manque une clé ici?
  • Le problème n'est ni l'etat, ni les accessoires semblent être fixés et le balisage n'est pas rendu. Et dites-vous que la touche (data dans ce cas) doit être prédéfini? Je ne vois pas ce que cela soit fait dans les exemples ni référencé dans les docs.
  • Non, je veux dire vous avez la fonction animation() l'intérieur d'un objet sans clé, ce n'est pas légal de code javascript.. tu veux dire { data: json, canvas: animation() }. Après une inspection plus proche de votre animation fonction ne retourne rien
  • N'êtes-vous pas obtenir de toute erreur dans le navigateur de la console?
  • Pouah, merci. Mise à jour de l'extrait. Il n'est pas encore rendu à rien, si. Et très difficile de dire ce que le problème est dû à Babel.
  • Si ce n'était pas clair, Babel est en train de jeter l'erreur donc je ne peux pas dire ce JSX il correspond.
  • Laissez-nous continuer cette discussion dans le chat.
  • Il n'est pas présent.accessoires de jeu.l'animation,mais ce.état.de l'animation.
  • ma compréhension était le deuxième argument de la méthode setState() set accessoires. Il y a clairement quelque chose de plus que je suis absent ici.
  • setState changer cela.état,pas cette.accessoires
  • selon les docs le premier argument définit l'état et une seconde en option définit les accessoires. Sinon, comment procédez-vous des accessoires au lieu d'utiliser setState?
  • setState ne peut que l'effet de cette.de l'état pour autant que je sais.U peut me donner le doc lien u mentionné.
  • setState(function(previousState, currentProps) {...}),je pense que u code mentionné est comme ça.Même si ce style,fonction setState est toujours la ce.état du résultat de la fonction en tant qu'argument.
  • C'est ce que je faisais référence: "Il est aussi possible de passer d'une fonction avec la fonction de signature(état, accessoires)." Vous avez raison, j'ai été très confus ici et il n'aide pas que la seule réponse que j'ai reçu utilise setState de cette façon.
  • Donc...comment pourrais-je aller sur la configuration à la fois le tableau de données pour rendre ma balise avec ET mon tableau d'objets de contrôle de l'animation dans chaque toile, individuellement? À l'heure actuelle, je peux le faire pour que le rendu en codepen (la seule façon dont je peux expliquer ce que c'est qu'il utilise babel-autonome au lieu de babel-core) et ne peut accéder à la méthode de l'objet setFrame() indépendamment du fait que j'utilise this.props.animation ou this.state.animation. J'ai un lien à ce que le résultat doit ressembler à ma question.
  • Me semble que je doit appeler this.setState(data: animation(json)) et puis this.state.data.CanvasSprite.setFrame() et modifier ma fonction d'animation de retourner un tableau de données qui comprend une CanvasSprite objet? Ou va this.setState(data: json, animation: animation(json)) mapper automatiquement le fichier json dans mon tableau de données, puis ajouter un autre élément à l'état appelé l'animation qui se compose d'un CanvasSprite objet? Parce que c'est pas actuellement en train de travailler...
  • Voici un codepen où elle au moins ne le rendu: codepen.io/anon/pen/wWvqrV?les éditeurs=0011. Mais il jette des erreurs que je ne suis pas fournir les clés de mon tableau de données, alors que ma compréhension est que l'utilisation des identifiants uniques pour chaque toile devrait suffire comme une clé. Et toujours pas d'animation...
  • Laissez-nous continuer cette discussion dans le chat.

InformationsquelleAutor Sophia Gold | 2016-05-28
  1. 23

    Vous avez des tonnes d'erreurs de syntaxe dans ton code, j'ai réglé pour vous.

    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
);

    Je ne sais pas la réponse de votre API, donc je ne sais pas si il y a d'autres à corriger.

    Certains des problèmes que j'ai remarqué:

    • Probablement votre indentation est faux, parce que vous avez eu des fonctions avec double return consolidés. Je vous suggère de permettre ESLint dans votre IDE pour rattraper ces erreurs.

    • Vous n'avez pas compris comment setState fonctionne, vous ne pouvez pas tout:

      this.setState({
foo: 'bar',
baa: myFn(this.state.foo)
});

      Sinon, this.state.foo à l'intérieur de myFn fera référence à l'ancienne valeur, et non pas à la nouvelle que vous êtes réglage de la droite maintenant.

      Que vous avez à faire this.setState({foo: 'bar'}, () => this.setState({baa: myFn(this.state.foo)}), mais alors, il est mieux de le faire comme je l'ai fait dans le code j'ai fixé ci-dessus.

    • Le problème est que j'ai utilisé function animation(){ this.state.data.map() } au lieu de function animation(json){ json.map() }, ce qui fait beaucoup plus de sens. Mais qui ne devrait effet d'accessoires, pas l'état. J'ai mis des bordures autour de l'toiles afin que je puisse dire si elles ont au moins le rendu, quel que soit le accessoires en cours de définition, et ils ne sont pas. Il n'est pas rendu.
    • Vous avez BEAUCOUP d'erreurs de syntaxe, pas juste le problème avec la fonction d'animation. Fixer le tout avec une linter, votre page ne sera probablement rendu.
    • Je viens de le coller dans votre code. Le code que vous avez écrit pour répondre à cette question n'est pas rendu.
    • Désolé, ce n'est pas un endroit où vous demandez un code à écrire et vous l'obtenez. Je vous ai donné des conseils et des réponses pour vous aider à obtenir votre code de travail. C'est tout.
    • Je n'ai pas demander à quelqu'un de réécrire mon code pour moi, mais vous l'avez fait. Vous avez répondu à cette question par une réécriture de tout le code qui ne fonctionnait pas, donc, si ce n'est pas de rendu et de renvoyer des erreurs à cause de beaucoup d'erreurs de syntaxe alors, ils sont vos erreurs de syntaxe. Ce n'est pas une réponse à une question...c'est juste différent de code qui ne fonctionne pas. Donc je suppose que maintenant j'ai le choix de continuer à déboguer mine ou d'une commutation de débogage vôtre à la place?
    • Je dirais que ce n'est pas un endroit où, au lieu de répondre à des questions spécifiques verbalement vous écrire un nouvel exemple de code qui n'est pas encore exécuté.
    • Je viens de fixe votre code et utilisé ES6 syntaxe pour le rendre plus simple à lire, il est toujours votre code. Il ne rend pas parce que mon extrait n'a pas accès à votre API
    • Il n'y a pas d'API. Il y a un script avec un JS classe qui ne sprite en fonction de l'animation, un fichier JSON avec les données, et de trois images. Dans la question que j'ai inclus un lien vers mon code dans le fichier de projet ainsi qu'un autre projet en cours d'exécution exactement ce que je suis en train de faire de celui-ci, sauf à l'aide d'un template cadre. J'ai ensuite un troisième lien dans le premier commentaire de votre réponse qui montre votre code en remplacement de la mienne et fonctionne toujours pas. J'ai littéralement a fourni l'ensemble du projet, puis à nouveau un exemple de projet avec votre code. À la fois de générer des erreurs et ne sont même pas rendu les toiles.
    • Désolé, il est difficile de déboguer le code compilé comme le lien que vous avez fourni. Beaucoup de le code de votre script est manquant donc je n'ai aucune idée de comment il devrait ressembler. Voici une codepen avec une version de travail de votre script, mais il manque beaucoup de pièces que vous n'avez pas fourni codepen.io/FezVrasta/stylo/OXJmRN?les éditeurs=0010
    • Pour info...le problème ici est que s'exécute sur codepen node.js et donc utilise babel-autonome au lieu de babel-core, qui est apparemment très différentes et explique pourquoi cette jsx n'est pas de compiler correctement sur le côté client.
    • J'utilise la même syntaxe sur mes projets et il fonctionne parfaitement
    • Ce n'est pas ES6 syntaxe, c'est autre chose. Quelle est la version de babel-core utilisez-vous sur le côté client? L'exemple que j'ai posté où votre code est en train de jeter des erreurs utilise la dernière disponible sur cdnjs.
    • Aussi, lorsque j'ajoute le animationEngine.js fichier à partir de mon exemple à votre codepen je ne peux toujours pas accéder à une méthode d'elle j'ai besoin de: setFrame(). Quelqu'un a dit que je devrais être à l'aide de ce.état.animation au lieu de cela.les accessoires, mais cela ne semble pas juste pour moi et n'est pas de faire une différence. Babel problèmes mis à part, voici une fourchette de votre codepen qui doit démontrer le comportement lié à ma question, mais n'est-ce pas: codepen.io/anon/pen/wWvqrV?les éditeurs=0011
    • Pour info...toute cette question est parce que les docs compter sur le obsolète babel navigateur et ne font aucune mention de webpack. Par conséquent, je n'ai réalisé qu'après plusieurs jours de perdu sur ce que vous êtes en utilisant webpack pour compiler votre jsx et c'est pourquoi il ne fonctionne pas pour moi. Toutes mes excuses pour tout frottement cela a créé. Bien que je ne vous souhaite a juste regardé l'exemple de lien dans ma question et m'a dit que pour commencer...
    • Je suis désolé pour cela, mais la valeur par défaut de la pile lorsque quelqu'un se développe avec React.js est webpack + babel, c'est pourquoi je ne l'ai pas mentionné.
    • Exactement. Il est considéré comme acquis...encore mentionné nulle part dans la documentation. En fait, le tutoriel ils ont jusqu'contredit à l'aide d'une version obsolète de babel navigateur. Il y a tout un problème de thread sur github à propos de la façon dont les documents ont été dépassées pour environ un an maintenant et fb est en faisant glisser leurs pieds à venir avec un remplacement de la version du navigateur plutôt que de simplement en mettant ensemble un tutoriel sur l'utilisation de webpack à réagir (ce qui n'est pas du tout évident, mais j'ai trouvé un exemple de projet).
    • En outre, je pense que je compris la raison de mon CanvasSprite objets n'étaient pas de l'instanciation est parce que setState() il déclenche à nouveau rendu de sorte document.getElementByID() ne fonctionne pas. J'ai besoin de définir l'état premier dans componentDidMount puis les accessoires, plus tard, dans componentShouldUpdate. Je vais mettre cela comme une réponse une fois que je peux obtenir webpack de course et de le tester.

    InformationsquelleAutor Fez Vrasta
  2. 14

    Ok... Voici le travail de projet. Obtenu de l'aide de @gumingfeng et @hkal.

    Leçons apprises:

    1. La Réagir docs sont ridiculement obsolètes.
    2. Droite JS vs JSX est vraiment pas plus mal de l'omi.
    3. Corrigé certaines erreurs de syntaxe dans les Récupérer.
    4. Tableau d'objet doit être instancié après de données est chargé dans le but de transmettre les références DOM dans les constructeurs.
    5. Cependant, l'appel de setState() à l'intérieur de componentDidUpdate() déclenche une boucle infinie donc dû mettre le tableau d'objet, directement et indépendamment de l'état.
    6. Lors de la création des éléments du DOM à partir d'un tableau, Réagir, de ne pas attribuer automatiquement le gestionnaire d'événement à l'élément particulier. En d'autres termes, il doit être passé l'index de tableau, de sorte que peut être utilisé pour accéder à ses valeurs dans les tableaux de.

    Ouf, je pense que c'est ça. Espérons que cela aide les autres.

    Et je voudrais juste conclure en disant: donnez-Réagir un essai sans JSX. C'est vraiment pas mal 🙂

    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')
);

    • C'est la réponse qui m'a le plus aidée. L'appel de récupérer directement à partir de componentDidMount() permet de résoudre le indéfini this frustration
    InformationsquelleAutor Sophia Gold