如何使用React useState Hook实现数组元素显示更多/收起功能

完全可以仅通过useState实现同等效果，不需要用到useEffect。这个场景没有需要在渲染完成后执行的副作用操作，仅需要切换展示数量的状态，React会在状态更新后自动重新渲染视图。

完整代码实现 #

import { useState } from 'react';

// 固定的汽车列表数据，不需要存到状态里
const cars = [
  { "name" : "奥迪", "country" : "德国"},
  { "name" : "宝马", "country" : "德国" },
  { "name" : "雪佛兰", "country" : "美国" },
  { "name" : "雪铁龙", "country" : "法国" },
  { "name" : "现代", "country" : "韩国" },
  { "name" : "梅赛德斯-奔驰", "country" : "德国" },
  { "name" : "雷诺", "country" : "法国" },
  { "name" : "西雅特", "country" : "西班牙" },
];

function Application() {
  // 初始化两个状态：展示条目数、是否展开
  const [itemsToShow, setItemsToShow] = useState(3);
  const [expanded, setExpanded] = useState(false);

  // 点击切换展示状态的方法
  const toggleShow = () => {
    if (expanded) {
      setItemsToShow(3);
      setExpanded(false);
    } else {
      setItemsToShow(cars.length);
      setExpanded(true);
    }
  };

  return (
    <div className="container">
      <h3>点击按钮查看更多/更少数据</h3>
      <div className="row">
        <h3>汽车列表</h3>
        <ul>
          {cars.slice(0, itemsToShow).map((car, index) => (
            <li key={index}>{car.name} - {car.country}</li>
          ))}
        </ul>
        <button onClick={toggleShow}>
          {expanded ? '收起' : '显示更多'}
        </button>
      </div>
    </div>
  );
}

补充说明 #

如果你的汽车列表是从后端接口异步获取的，那才需要用到useEffect来发起请求更新数据状态，当前静态数据的场景不需要额外Hook。

内容的提问来源于stack exchange，提问作者P H