Question

切片我的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是异步，这意味着它返回一个promise。

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关键字添加到包含代码的top函数中，但如果这是一个网站，则需要使用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中获取数据会更好{1}}，将数据保存在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>
          );
    });
}

获取data.slice不是函数问题

2 个答案: