React.js:使用Fetch API加载JSON数据,并从对象数组中加载道具

Question

对于react.js来说是新手,在完成教程和阅读文档之后,我仍然在使用js fetch从JSON文件加载我的数据以及从对象数组中设置属性.我也不确定我是否正在我的事件处理程序中正确访问DOM属性.我必须错过一些相当简单的事情.

作为参考,这里是我的代码与项目的其余部分和这里就是它应该的样子.

ETA:我从文档中不知道babel浏览器已被弃用,因此决定只使用带有ES5语法的直接Javascript而不是JSX.代码在下面更新,但它仍然没有呈现标记.

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

你的代码中有很多语法错误,我已经为你修复了它们.

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

我不知道您的API的响应,所以我不确定是否还有其他问题需要解决.

我注意到的一些问题:

• 可能你的缩进是错误的,因为你有双重return语句的函数.我建议你在IDE中启用ESLint来捕获这些错误.

• 你还不明白它是如何setState运作的,你不能只做:

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

  否则,this.state.fooinside myFn将引用它的旧值,而不是您现在正在设置的新值.
  你必须这样做this.setState({foo: 'bar'}, () => this.setState({baa: myFn(this.state.foo)}),但是,最好像我在上面修复的代码中那样做.

Answer 2

好的... 这是工作项目.得到了@gumingfeng和@hkal的帮助.

得到教训:

1. React文档过时了.
2. 直接JS与JSX真的不差一点.
3. 更正了Fetch中的一些语法错误.
4. 在加载数据之后,需要实例化对象数组,以便在构造函数中传递DOM引用.
5. 但是,调用setState()inside componentDidUpdate()会触发无限循环,因此必须直接设置对象数组并独立于状态.
6. 从数组创建DOM元素时,React不会自动将事件处理程序分配给特定元素.换句话说,它必须传递给数组索引,以便可以用来访问数组中的值.

哇,我想就是这样.希望这有助于其他人.

最后我会说,给React一个没有JSX的尝试.这真的不是那么糟糕:)

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