Question

我有这个DB.Json结构：

{
   "interiores": [
    { 

      "texto":[
       "No espaço gerado pela construção dispomos os equipamentos necessários para o nosso conforto. Os móveis onde nos sentamos, aqueles de apoio,  aqueles para se guardar os utensílios. Temos  também os equipamentos de iluminação e de ar  condicionado. Fazer com isso uma composição plástica de forma, cor e proporções. Imaginar percursos,  criar um abrigo."
       ],

      <--// these are the paginated items 
      "fotos": [
        "int_00", 
        "int_01",
        "int_02",
        "int_03",
        "int_04",
        "int_05",
        "int_06",
        "int_07",
        "int_08",
        "int_09"            
      ]
    }
  ],

  "casas": [
      <--// these are the paginated items 
     {          
      "id": 1,
      "nome": "house 1",
      "texto": "This is the description of the house 1",
      "fotos": [
        "int_00", 
        "int_01",
        "int_02",
        "int_03"
      ]
    },
    {
      "id": 2,
      "nome": "house 2",
      "texto": "This is the description of the house 2",
      "fotos": [
        "int_04",
        "int_05",
        "int_06",
        "int_07"
      ]
    },
    {
      "id": 3,
      "nome": "house 3",
      "texto": "This is the description of the house 3",
      "fotos": [
        "int_08",
        "int_09",
        "int_10",
        "int_11"
      ]
    }       
  ]     
}

当我获取内饰的项目进行分页时，它会成功运行。但是，当我尝试在casa的结构中执行相同操作时。没用重要的是要注意casas与内部装饰不同的事实，因为Interiores仅对图片进行分页，而casas对每页中的所有字段进行分页。

ReactJS代码呈现了Interiores的分页。运行正常。

import React, { Component } from 'react'
import axios from 'axios' 

const URL_INTERIORES = 'http://localhost:3001/interiores';   

class Interiores extends Component {
  constructor(props) {
    super(props);
    this.state = {
      interioresFotos: [],
      interioresTexto: [],         
      currentPage: 1,
      itemsPerPage: 8
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClickPrev = this.handleClickPrev.bind(this);
    this.handleClickNext = this.handleClickNext.bind(this);
  }

  componentDidMount() { 
    axios.get(URL_INTERIORES)
      .then(res => {
        this.setState({ interioresFotos: res.data[0].fotos })
        this.setState({ interioresTexto: res.data[0].texto })
      })      
  }      

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }

  handleClickPrev(event) {
    if (this.state.currentPage > 1) {
      this.setState({
        currentPage: Number(this.state.currentPage - 1)
      });
    }
    else {
      event.preventDefault()
    }
  }

  handleClickNext(event) {
    if (this.state.currentPage < this.state.interioresFotos.length / this.state.itemsPerPage) {
      this.setState({
        currentPage: Number(this.state.currentPage + 1)
      });
    } else {
      event.preventDefault()
    }
  }            

  render() {
    const { interioresFotos, interioresTexto, currentPage, itemsPerPage } = this.state;

    // Logic for displaying current photos
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = interioresFotos.slice(indexOfFirstItem, indexOfLastItem);

    while (currentItems.length !== itemsPerPage) {
      currentItems.push('none');
    }

    const renderFotos = currentItems.map((foto, index) => {


      // Rendering the images
      return (
        <a className="gal-img-js" href={`../images/${foto}.jpg`} key={index}>
          <img src={`../images/${foto}_thumb.jpg`} alt="" />
        </a>
      )
    });

    // Logic for displaying page numbers

    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(interioresFotos.length / itemsPerPage); i++) {
      pageNumbers.push(i);
    }


    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <li
          key={number}
          id={number}
          onClick={this.handleClick}
          className={currentPage === number ? 'active' : ''}
        >
          {number}
          {(number < this.state.interioresFotos.length / this.state.itemsPerPage) &&
          <span className="pipe">
            &#124;
          </span>
          }
        </li>
      );
    });


    return (
      <div className="wrapper-portfolio-pages interiores">
        <h3>Interiores</h3>          
          <div>
            <p>
              {interioresTexto}
            </p>
          </div>

        <div className="gallery images-box-1 big">
          {renderFotos}
        </div>
        <div className="page-numbers-container">
          {(this.state.currentPage > 1) &&
            <a className="prev-button" onClick={this.handleClickPrev}>&lt;</a>
          }
          <ul className="page-numbers">
            {renderPageNumbers}
          </ul>
          {(this.state.currentPage < this.state.interioresFotos.length / this.state.itemsPerPage) &&
            <a className="next-button" onClick={this.handleClickNext}>&gt;</a>
          }
        </div>
      </div>
    );
  }
}

export default Interiores

这里有渲染casas的代码。该代码无法成功运行。它显示页码运行正常，但没有在每页中显示casas。

import React, { Component } from 'react'
import axios from 'axios'

const URL_CASAS = 'http://localhost:3001/Casas';    

class Casas extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      totalCasas:[], 
      casasNome: [],
      casasFotos: [],
      casasTexto: [],
      open: false,
      currentPage: 1,
      itemsPerPage: 1
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClickPrev = this.handleClickPrev.bind(this);
    this.handleClickNext = this.handleClickNext.bind(this);
  }

  componentDidMount() {
    axios.get(URL_CASAS)
      .then(res => {       
        this.setState({ totalCasas: Object.keys(res.data)})
        this.setState({ casasNome: res.data[0].nome })
        this.setState({ casasFotos: res.data[0].fotos })
        this.setState({ casasTexto: res.data[0].texto })    
      })     
  }

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }

  handleClickPrev(event) {
    if (this.state.currentPage > 1) {
      this.setState({
        currentPage: Number(this.state.currentPage - 1)
      });
    }
    else {
      event.preventDefault()
    }
  }

  handleClickNext(event) {
    if (this.state.currentPage < this.state.totalCasas.length) {
      this.setState({
        currentPage: Number(this.state.currentPage + 1)
      });
    } else {
      event.preventDefault()
    }
  }


  render() {
    const {  totalCasas, casasNome, casasFotos, casasTexto, currentPage, itemsPerPage } = this.state;

    // Logic for displaying current casas
    const indexOfLastItem = currentPage * totalCasas;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = ObjectKeys(totalCasas).slice(indexOfFirstItem, indexOfLastItem);

    while (currentItems.length !== itemsPerPage) {
      currentItems.push('none');
    }

    const renderFotos = casasFotos.map((foto, index) => {

      // Logic for displaying squares in the spaces after the last photo if blank spaces exist     

      while (foto === "none") {
        return (<img className="gal-img-js quadrado" src={`../images/quadrado.jpg`} alt="" />)
      }

      // Rendering the images
      return (
        <a className="gal-img-js" href={`../images/${foto}.jpg`} key={index}>
          <img src={`../images/${foto}_thumb.jpg`} alt="" />
        </a>
      )
    });

    // Logic for displaying page numbers

    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(totalCasas.length); i++) {
      pageNumbers.push(i);   
    }


    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <li
          key={number}
          id={number}
          onClick={this.handleClick}
          className={currentPage === number ? 'active' : ''}
        >
          {number}
          {(number < totalCasas.length) &&
          <span className="pipe">
            &#124;
          </span>
          }
        </li>
      );
    });


    return (
      <div className="wrapper-portfolio-pages Casas">
        <h3>{casasNome}</h3>      

        <div className="gallery images-box-1 big">
          {renderFotos}
        </div>
        <div className="page-numbers-container">
          {(this.state.currentPage > 1) &&
            <a className="prev-button" onClick={this.handleClickPrev}>&lt;</a>
          }
          <ul className="page-numbers">
            {renderPageNumbers}
          </ul>
          {(this.state.currentPage < this.state.totalCasas.length ) &&
            <a className="next-button" onClick={this.handleClickNext}>&gt;</a>
          }
        </div>
      </div>
    );
  }
}



export default Casas

ReactJS-在不同的db.json结构中进行分页

0 个答案: