IT技术 - React.js：使用 Fetch API 和对象数组中的props加载 JSON 数据 - 吾爱随笔录

React.js：使用 Fetch API 和对象数组中的props加载 JSON 数据

IT技术 javascript json reactjs fetch

2021-04-27 08:22:26

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

2个回答

您的代码中有大量语法错误，我已经为您修复了它们。

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.fooinsidemyFn将引用它的旧值，而不是您现在正在设置的新值。
你必须这样做this.setState({foo: 'bar'}, () => this.setState({baa: myFn(this.state.foo)})，但是，最好像我在上面修复的代码中所做的那样做。

好的...这是工作项目。从@gumingfeng 和@hkal 那里得到了一些帮助。

得到教训：

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

哇，我想就是这样。希望这对其他人有帮助。

最后我只想说，在没有 JSX 的情况下试试 React。真的没那么糟糕:)

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

其它你可能感兴趣的问题