单击按钮时显示更多处于反应状态的项目

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 的反应方式相得益彰。示例：

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

Answer 2

需要功能组件版本的可以查看这里。我已经将 @SrThompson 写入的基于类的组件更改为函数

import { useMemo, useState } from "react";
import "./styles.css";

const carsList = [
  { 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" }
];

export default function App() {
  const [cars] = useState(carsList);
  const [numberOfitemsShown, setNumberOfItemsToShown] = useState(5);

  const showMore = () => {
    if (numberOfitemsShown + 3 <= cars.length) {
      setNumberOfItemsToShown(numberOfitemsShown + 3);
    } else {
      setNumberOfItemsToShown(cars.length);
    }
  };

  const itemsToShow = useMemo(() => {
    return cars
      .slice(0, numberOfitemsShown)
      .map((car, index) => <li key={car.name + index}>{car.name}</li>);
  }, [cars, numberOfitemsShown]);

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

工作codesandbox