Выборка data.slice не является проблемой функции - PullRequest
Новая
       8

Выборка data.slice не является проблемой функции

0 голосов
/ 31 мая 2018

У меня проблема с нарезкой моего JSON.Я использовал data.json, и все работало нормально, но когда я пытаюсь использовать то же самое с fetch.Консоль говорит мне, что data.slice не является функцией.Это мой код в React: 

    const left = '<';
    const right = '>';
    const { currentPage, usersPerPage } = this.state;
    const lastPage = currentPage * usersPerPage;
    const firstPage = lastPage - usersPerPage;
    const data = fetch('https://jsonplaceholder.typicode.com/photos')
        .then(response => response.json());
    const currentPhotos = data.slice(firstPage, lastPage);
    const renderPhotos = currentPhotos.map((photo) => {
        return <tr key={photo.id}>
            <td className="number">{photo.title}</td>
        </tr>
    });

    const numbers = [];
    for (let i = 1; i <= Math.ceil(data.length / usersPerPage); i++) {
        numbers.push(i);
    }

    const renderPagination = numbers.map(number => {
        return (
            <li className="controls" key={number} id={number} onClick={this.handlePages}>
                {number}
            </li>
        );
    });

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

fetch возвращает Promise, поэтому, если вы хотите использовать метод среза, вы должны использовать его внутри последнего .then(), но было бы лучше, если вы извлечете свои данные в componentDidMount, сохраните ваши данныев состоянии React и после этого используйте в методе render; например,

, ваш код должен выглядеть следующим образом: 

componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/photos')
    .then(response => {
         const data = response.json();
         this.setState({
             data: data,
         });
    );
}

render() {
    const { currentPage, usersPerPage, data } = this.state;
    const currentPhotos = data.slice(firstPage, lastPage);

    const renderPhotos = currentPhotos.map((photo) => (
        <tr key={photo.id}>
             <td className="number">{photo.title}</td>
        </tr>
    );

    const numbers = [];
    for (let i = 1; i <= Math.ceil(data.length / usersPerPage); i++) {
        numbers.push(i);
    }

    const renderPagination = numbers.map(number => {
         return (
              <li className="controls" key={number} id={number} onClick={this.handlePages}>
                  {number}
              </li>
          );
    });
}
0 голосов
/ 31 мая 2018

fetch является асинхронным, что означает, что он возвращает обещание. 

const data = fetch('https://jsonplaceholder.typicode.com/photos')
    .then(response => response.json())
    .then(json => console.log(json));

константа data здесь равна Promise.который ожидает разрешения, чтобы заставить ваш код работать, вы должны либо использовать async/await, например, так: 

const data = await fetch('https://jsonplaceholder.typicode.com/photos')
    .then(response => response.json())
    .then(json => console.log(json));

, и вам также нужно будет добавить ключевое слово async в вашу верхнюю функцию, которая оборачиваетсяваш код, но если это веб-сайт, вам нужно будет использовать babel, чтобы он работал во всех браузерах.

другой вариант - использование метода обратного вызова, но вам придется выполнить некоторую переписку, но вотначало: 

fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json())
.then(data => {
    const currentPhotos = data.slice(firstPage, lastPage);
    const renderPhotos = currentPhotos.map((photo) => {
        return <tr key={photo.id}>
            <td className="number">{photo.title}</td>
        </tr>
    });
});
...