Question

我想在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;

Answer 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}

         />
     )
   })

映射获取的数据

1 个答案: