Question

我有这个组件 Cat ，它从本地json文件中提取数据，并按字母顺序显示文件中的所有Cats。我需要先显示 10只猫，然后再显示加载更多按钮以显示其余部分。有没有人有一个如何以一个好方式做到这一点的解决方案？行{providerNumber.length}猫仍然需要显示猫的总数，而不是前10个。

谢谢！

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import Error from './Error.jsx';



export default class Cat extends React.Component{
  constructor() {
    super();
    this.state = {
      providersData: [],
      loading: true
    };
  }

  componentDidMount () {
    setTimeout(() => this.setState({ loading: false }), 500);
    fetch('../feed/sample.json')
    .then(response => { console.log(response); return response.json()})
    .then(responseData => {
      console.log(responseData)



      this.setState({ providersData: [...responseData.providers].sort((a,b) => {
        const aName = a.companyName.toUpperCase()
        const bName = b.companyName.toUpperCase()
        if (aName < bName) {
          return -1;
        }
        if (aName > bName) {
          return 1
        }
          // names must be equal
          return 0
        })
      });

    })

    .catch(error => {
      console.log('Error fetching and parsing data', error);
    });
  }


  render() {
      const { loading } = this.state;
      const providerNumber = this.state.providersData.filter(provider => provider.yearStarted >= 2010 && provider.type === 'cat')

      if(loading) {
        return (
          <div>  <img src="./../assets/loader.svg" alt=""/></div>
        ); // render loading when app is not ready
      }
      return this.state.providersData.length ? (
        <div>
          <h1>Cats</h1>
          <div> {providerNumber.length} Cats</div>
          {this.state.providersData.map(function(provider, index) {
            if (provider.yearStarted >= 2010 && provider.type === 'cat') {
              return (
                <div key={index} className="job">
                  <h2>{provider.companyName}</h2>
                  <img src={provider.images['Company Logo'].url} alt=""/>
                </div>
              )
            }
          })}
        </div>
      ) : <Error />
    }
  };

Answer 1

在渲染中调用.map之前，您可以执行以下操作：

this.state.providersData.slice(0, this.state.numberOfCatsShown).map(...)

您需要先在构造函数中将this.state.numberOfCatsShown初始化为10。

如果要显示更多猫，请使用如下所示的函数：

showMoreCats() {
  const newNumberOfCatsShown = this.state.numberOfCatsShown + 10;
  // set it to the length of the array to show all the cats.
  this.setState({ numberOfCatsShown: newNumberOfCatsShown });
}

使用加载更多按钮显示已过滤数组中的有限数量的项目

1 个答案: