javascript - 单击按钮时显示更多处于 react 状态的项目

Question

我目前正在尝试创建一个显示某些状态但在单击按钮后显示更多状态的组件。每次单击按钮时，它应该显示 3 个以上的项目。

我尝试了一些不同的东西，这是我当前的代码:感谢任何帮助和解释:

import React from 'react';
import { render } from 'react-dom';
class ShowSomeItems extends React.Component {
  constructor() {
    super()
      this.state = {
      cars: [
        { "name": "Audi", "country": "Germany" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Chevrolet", "country": "USA" },
        { "name": "Citroen", "country": "France" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Mercedes-Benz", "country": "Germany" },
        { "name": "Renault", "country": "France" },
        { "name": "Seat", "country": "Spain" },
        { "name": "Dodge", "country": "USA" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Tesla", "country": "USA" },
        { "name": "Volkswagen", "country": "Germany" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Jaguar", "country": "United Kingdom" },
        { "name": "GMC", "country": "USA" },
        { "name": "Bentley", "country": "United Kingdom" },
      ],
      numberOfitemsShown: 5,
    }
}


showMore = () => {
    let numberToincrementBy = 3;
    if(this.state.numberOfitemsShown < this.state.car.length){
     itemsToShow = this.cars.slice(0, incremenrIndex)
      numberToincrementBy+3
      return itemsToShow
    }
  }

render() {

    let itemsToShow = "Loading...";  
       if(this.state.numberOfitemsShown){
         itemsToShow =  for(let x = 0; x < 5; x++) {
        <li key={x}>{this.state.cars[x]['name']}</li>
       }
  }

return (
      <div>
        <ul>
         {itemsToShow}
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}


render(<ShowSomeItems />, document.getElementById('root'));

Answer 1

在这种情况下，更好的方法是利用组件状态来保持您要显示的项目的当前数量，并使用按钮增加它。它更干净，并且与定义 UI 的 react 方式相得益彰。示例:

class ShowSomeItems extends React.Component {
  constructor() {
    super()
    this.state = {
      cars: [
        { "name": "Audi", "country": "Germany" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Chevrolet", "country": "USA" },
        { "name": "Citroen", "country": "France" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Mercedes-Benz", "country": "Germany" },
        { "name": "Renault", "country": "France" },
        { "name": "Seat", "country": "Spain" },
        { "name": "Dodge", "country": "USA" },
        { "name": "BMW", "country": "Germany" },
        { "name": "Tesla", "country": "USA" },
        { "name": "Volkswagen", "country": "Germany" },
        { "name": "Hyundai", "country": "South Korea" },
        { "name": "Jaguar", "country": "United Kingdom" },
        { "name": "GMC", "country": "USA" },
        { "name": "Bentley", "country": "United Kingdom" },
      ],
      numberOfitemsShown: 5,
    }
  }


  showMore = () => {
    if (this.state.numberOfitemsShown + 3 <= this.state.cars.length) {
      this.setState(state => ({ numberOfitemsShown: state.numberOfitemsShown + 3 }));
    } else {
      this.setState({ numberOfitemsShown: this.state.cars.length })
    }
  }

  render() {

    const itemsToShow = this.state.cars
      .slice(0, this.state.numberOfitemsShown)
      .map(car => <li key={car.name}>{car.name}</li>);

    return (
      <div>
        <ul>
          {itemsToShow.length ? itemsToShow : "Loading..."}
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}

编辑

您可以使渲染方法更清晰，将 itemsToShow 提取到组件中，如下所示:

const Items = props => {
  if (props.cars.length === 0) {
    return "Loading..."
  }
  return props.cars
    .slice(0, props.numberOfitemsShown)
    .map(car => <li key={car.name}>{car.name}</li>)
}

class ShowSomeItems extends React.Component {
//rest excluded for brevity

  render() {

    return (
      <div>
        <ul>
          <Items cars={this.state.cars} numberOfitemsShown={this.state.numberOfitemsShown} />
        </ul>
        <button onClick={this.showMore}>
          show more
        </button>
      </div>
    );
  }
}