Question

我从Dribbble API获取数据。这几乎是成功的，但它正在加载来自API的12个镜头，并且在此之后通过再次重复相同的12而发生问题然后在它之后以正确的方式加载其他的：13,14,15 ..

镜头＆＃39;返回： 1,2,3,4,5,6,7,8,9,10,11,12。好的 1,2,3,4,5,6,7,8,9,10,11,12。重复问题!!!错误 13,14,15,16 ......好的

这种不良重复的解决方案是什么？

以下是代码：

event.shiftKey

Answer 1

为什么

我认为Waypoint组件中的onEnter事件是意外触发的，这导致多次调用getShots（）函数。

如何

我的建议是指定一个dataFecthed状态来控制Waypoint组件是否安装。如下所示：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Waypoint from 'react-waypoint'
import Dribbble from './Dribbble'

export default class Dribbbles extends Component {
  constructor(props) {
    super(props)
    this.state = { page: 1, shots: [], dataFetched: true }
    this.getShots = this.getShots.bind(this)
  }

  componentDidMount() {
    this.getShots()
  }

  getShots() {
    this.setState({
      dataFetched: false,
    })
    return $.getJSON(
      'https://api.dribbble.com/v1/shots?page=' +
        this.state.page +
        '&access_token=41ff524ebca5e8d0bf5d6f9f2c611c1b0d224a1975ce37579326872c1e7900b4&callback=?'
    ).then(resp => {
      var newShots = this.state.shots.concat(resp.data)
      this.setState({
        page: this.state.page + 1,
        shots: newShots,
        dataFetched: true,
      })
    })
  }

  render() {
    const shots = this.state.shots.map((val, i) => {
      return <Dribbble dados={val} key={i} />
    })

    return (
      <div>
        <ul>{shots}</ul>
        {this.state.dataFetched && <Waypoint onEnter={this.getShots} />}
      </div>
    )
  }
}

ReactJS - 从API加载不需要的重复数据

1 个答案:

为什么

如何