javascript - how - React.js: carga de datos JSON con Fetch API y accesorios de la matriz de objetos

how to call api in react js

Question

Totalmente nuevo para reaccion.js y después de leer el tutorial y leer los documentos, todavía estoy luchando un poco con el uso de js fetch para cargar mis datos de un archivo JSON, así como establecer las propiedades de una matriz de objetos. Tampoco estoy seguro de que esté accediendo a las propiedades de DOM correctamente en mi controlador de eventos. Debo estar perdiendo algo bastante sencillo.

Para referencia, aquí está mi código con el resto del proyecto y esto es lo que se supone que debe ser.

ETA: No tenía la menor idea de la documentación de que el navegador de babel estaba en desuso, así que decidí usar JavaScript sin formato con ES5 en lugar de JSX. Código actualizado a continuación, pero aún no está representando el marcado.

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

Answer 1

Ok ... Aquí está el proyecto de trabajo. Recibí ayuda de @gumingfeng y @hkal.

Lecciones aprendidas:

1. Los documentos de React están ridículamente desactualizados.
2. Straight JS vs. JSX realmente no es peor imo.
3. Se corrigieron algunos errores de sintaxis en Fetch.
4. La matriz de objetos debe crearse una instancia después de que se carguen los datos para pasar las referencias de DOM a los constructores.
5. Sin embargo, al llamar a setState() dentro de componentDidUpdate() activa un bucle infinito, por lo que tuvo que establecer la matriz de objetos de forma directa e independiente del estado.
6. Al crear elementos DOM desde una matriz, React no asigna automáticamente el controlador de eventos al elemento en particular. En otras palabras, se debe pasar el índice de matriz para que se pueda utilizar para acceder a sus valores en las matrices.

Vaya, creo que eso es todo. Espero que esto ayude a los demás.

Y acabo de concluir diciendo, prueba React sin JSX. En realidad no está tan mal :)

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

Answer 2

Tienes toneladas de errores de sintaxis en tu código, los he arreglado para ti.

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

No conozco la respuesta de su API, así que no estoy seguro de que haya otros que corregir.

Algunos de los problemas que he notado:

• Probablemente su sangría esté mal, porque tenía funciones con declaraciones de doble return . Le sugiero que habilite ESLint en su IDE para detectar esos errores.

• No has entendido cómo funciona setState , no puedes simplemente hacer:

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

  De lo contrario, this.state.foo dentro de myFn se referirá al valor anterior de este, y no al nuevo que está configurando en este momento.
  Tendrías que hacer this.setState({foo: ''bar''}, () => this.setState({baa: myFn(this.state.foo)}) , pero entonces, es mejor hacer lo que hice En el código que he fijado anteriormente.