Question

获取数据。窗格不是功能问题

2018-05-31

3233

json reactjs fetch slice

我在切片 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>
        );
    });

Answer 1

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>
    });
});

Answer 2

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>
          );
    });
}