Question

我下面有一个针对SO用户Piotr Berebecki的ReactJS代码。代码成功运行。这是一个句柄分页，它从数组中返回项目。我想做同样的事情，但要从JSON DB返回数据该怎么办？我该如何解决？谢谢。 Here is the app in the CodePen。

这里是My DB Json。我只想返回图像（名为“ fotos”）。它将替换下面第二个代码中数组中的“ todos” 。注意：它必须由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 } 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     
    };
    this.handleClick = this.handleClick.bind(this);
  }

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

  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>
          {renderTodos}
        </ul>
        <ul id="page-numbers">
          {renderPageNumbers}
        </ul>
      </div>
    );
  }
}

export default Todo;

Answer 1

您似乎已经在打电话之后询问您如何处理数据，这就是我认为应该使用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;

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

1 个答案: