Javascript React JS-将静态分页从JSON转换为动态分页

下面我有一个为SO用户编写的代码。代码正在成功运行，这是一个从数组返回项的句柄分页。我想做同样的事情，但是从JSON数据库返回数据我该怎么做？我怎样才能解决它？谢谢

这是我的DB Json。我只想返回图像（名为“fotos”）。它将在下面的第二个代码中替换数组中的“TODO” . 注意：必须由Axios制造

{
"interiores": [
  {     
    "nome": "house 1",
    "descricao": "This is the description of the house 1",
    "fotos": [      
      "int_02", "int_02", "int_02", "int_02", "int_02"      
    ]
  }  
 ]
}

代码：

import React，{Component}来自“React”
类Todo扩展组件{
构造函数（）{
超级（）；
this.state={
todos:[a'、'b'、'c'、'd'、'e'、'f'、'g'、'h'、'i'、'j'、'k']，
当前页面：1，
致院：3
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
这是我的国家({
当前页面：编号（event.target.id）
});
}
render（）{
const{todos，currentPage，todoperpage}=this.state；
//显示TODO的逻辑
const indexOfLastTodo=当前页面*到页面；
const indexOfFirstTodo=indexOfLastTodo-todosparterpage；
const currentTodos=todos.slice（indexOfFirstTodo，indexOfLastTodo）；
const renderTodos=currentTodos.map（（todo，索引）=>{
返回
{todo}
；
});
//显示页码的逻辑
常量页码=[]；
for（设i=1；i{
返回(

{number}

);
});
返回(

{renderTodos}


{renderPageNumbers}

);
}
}
导出默认Todo；

您似乎在问，一旦您已经打了电话，如何处理数据。我认为您应该使用componentDidMount来处理数据。我还没有对其进行测试，但应该为您提供一个良好的起点

{
"interiores": [
  {     
    "nome": "house 1",
    "descricao": "This is the description of the house 1",
    "fotos": [      
      "int_02", "int_02", "int_02", "int_02", "int_02"      
    ]
  }  
 ]
}
import React, { Component } from 'react'

class Todo extends Component {
  constructor() {
    super();
    this.state = {      
      todos: ['a','b','c','d','e','f','g','h','i','j','k'],
      currentPage: 1,
      todosPerPage: 3 ,
      fotos: '',
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }
  async componentDidMount() {
      //make call to database and set the db data to your state.
      const dbData = axios.get('http://yourapi.com/todods')
    .then(function (response) {
      this.setState({fotos: response.data.interiores[0].fotos})
    })
    .catch(function (error) {
      console.log('error:', error);
    });   
  }
  render() {
    const { todos, currentPage, todosPerPage } = this.state;

    // Logic for displaying todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

    const renderTodos = currentTodos.map((todo, index) => {
      return <li key={index}>{todo}</li>;
    });

    // Logic for displaying page numbers
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }

    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <li
          key={number}
          id={number}
          onClick={this.handleClick}
        >
          {number}
        </li>
      );
    });

    return (
      <div>
        <ul>
          {this.state.fotos? this.state.fotos : 'nothing to display' }
        </ul>
        <ul id="page-numbers">
          {renderPageNumbers}
        </ul>
      </div>
    );
  }
}

export default Todo;

{
“内部”：[
{     
“nome”：“house 1”，
“描述”：“这是对房子的描述1”，
“fotos”：[
“int_02”、“int_02”、“int_02”、“int_02”、“int_02”
]
}  
]
}
从“React”导入React，{Component}
类Todo扩展组件{
构造函数（）{
超级（）；
this.state={
todos:[a'、'b'、'c'、'd'、'e'、'f'、'g'、'h'、'i'、'j'、'k']，
当前页面：1，
致院：3，
福托斯：“，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
这是我的国家({
当前页面：编号（event.target.id）
});
}
异步组件didmount（）{
//调用数据库并将db数据设置为您的状态。
const dbData=axios.get（'http://yourapi.com/todods')
.然后（功能（响应）{
this.setState（{fotos:response.data.interiors[0].fotos}）
})
.catch（函数（错误）{
console.log（'error:'，error）；
});   
}
render（）{
const{todos，currentPage，todoperpage}=this.state；
//显示TODO的逻辑
const indexOfLastTodo=当前页面*到页面；
const indexOfFirstTodo=indexOfLastTodo-todosparterpage；
const currentTodos=todos.slice（indexOfFirstTodo，indexOfLastTodo）；
const renderTodos=currentTodos.map（（todo，索引）=>{
返回
{todo}
；
});
//显示页码的逻辑
常量页码=[]；
for（设i=1；i{
返回(

{number}

);
});
返回(

{this.state.fotos？this.state.fotos:'无需显示'}


{renderPageNumbers}

);
}
}
导出默认Todo；

您是在询问如何调用数据库还是如何处理已从数据库中提取的数据？是的，我忘了提到我使用axios来执行此操作dbjson的“内部”必须使用axios来替换“todo”数组，axios以json的url为中心。类似于：componentDidMount（）{axios.get（URL_INTERIORES）.then（res=>{this.setState（{INTERIORES:res.data}）}）注意db'INTERIORES'对象结构与'todos'数组有点不同。是的，您只需更改到数据的正确路径即可。也请注意，您可能应该将axios调用移动到一个单独的文件中，并在需要时导入它。问题的关键在于，与静态数组相比，处理db.json对象比较困难。这是一个开始的问题

{
"interiores": [
  {     
    "nome": "house 1",
    "descricao": "This is the description of the house 1",
    "fotos": [      
      "int_02", "int_02", "int_02", "int_02", "int_02"      
    ]
  }  
 ]
}
import React, { Component } from 'react'

class Todo extends Component {
  constructor() {
    super();
    this.state = {      
      todos: ['a','b','c','d','e','f','g','h','i','j','k'],
      currentPage: 1,
      todosPerPage: 3 ,
      fotos: '',
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }
  async componentDidMount() {
      //make call to database and set the db data to your state.
      const dbData = axios.get('http://yourapi.com/todods')
    .then(function (response) {
      this.setState({fotos: response.data.interiores[0].fotos})
    })
    .catch(function (error) {
      console.log('error:', error);
    });   
  }
  render() {
    const { todos, currentPage, todosPerPage } = this.state;

    // Logic for displaying todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

    const renderTodos = currentTodos.map((todo, index) => {
      return <li key={index}>{todo}</li>;
    });

    // Logic for displaying page numbers
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }

    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <li
          key={number}
          id={number}
          onClick={this.handleClick}
        >
          {number}
        </li>
      );
    });

    return (
      <div>
        <ul>
          {this.state.fotos? this.state.fotos : 'nothing to display' }
        </ul>
        <ul id="page-numbers">
          {renderPageNumbers}
        </ul>
      </div>
    );
  }
}

export default Todo;