映射获取的数据答案

【问题标题】：Mapping over fetched data映射获取的数据
【发布时间】：2018-05-09 11:34:37
【问题描述】：

我想在 React 中为现在的分页创建一个原语。我在映射获取的数据时遇到问题。我想在 PaginDiv 中从 5000 张照片中提取 12 个元素。 x 和 y 我将用于下一个框 (box={ph})。谁能告诉我我做错了什么？代码如下：

class Pagination extends Component {
  constructor(props) {
  super(props)
}
  state= {
    photos: [],
    initialPage: 1
}
componentDidMount() {
  axios.get( 'https://jsonplaceholder.typicode.com/photos' )
    .then( response => {
      console.log(response);
      const photos = response.data;
      const updatedPhotos = photos.map(photo => {
        return {
          ...photo
        }
      });

    this.setState({photos: updatedPhotos})
  });
}

render() {
  const x = 0;
  const y = 12;
  const myMap = new Map([
    [this.state.photos.slice(x,y)]
  ]);
  const renderIt = myMap.map(photo =>{
    const ph = photo.id;
    x == this.state.initialPage + y;
    y == this.state.initialPage +y +y;
    return (
          <PaginDiv
            box={ph}
            key={photo.id}
          />
    )
  })
  return (
          <div>
            {renderIt}
          </div>
  )
}

}

export default Pagination;

【问题讨论】：

标签： reactjs pagination

【解决方案1】：

我为我的原始分页找到了解决方案。我不得不改变一个概念。下面的代码：

  state= {
photos: [],
x: 0,
y: 12,
initialPage: 1
}
componentDidMount() {
  axios.get( 'https://jsonplaceholder.typicode.com/photos' )
    .then( response => {
      console.log(response);
      const photos = response.data.slice(this.state.x+
(12*this.state.initialPage), this.state.y+
(12*this.state.initialPage));
      const updatedPhotos = photos.map(photo => {
        return {
          ...photo
        }
      });

      this.setState({photos: updatedPhotos})
    });
}

render() {
  const renderIt = this.state.photos.map(photo =>{
    return (
          <PaginDiv
            box={photo.id}
            key={index}

         />
     )
   })

【讨论】：