React中如何为数组每个元素独立设置状态实现单独展开更多功能

问题根源 #

你当前定义的start和end是全局共用状态，所有子数组都使用同一套切片参数，因此修改后所有子数组的展示内容会同步变动，无法实现单独控制。

实现方案 #

要实现点击仅修改对应子数组的展示内容，需要给每个子数组配置独立的展示长度状态：

1. 将原来的全局切片参数状态改为数组类型，数组的每个下标对应一个子数组的当前展示长度，初始值统一设为4
2. 点击加载更多按钮时传入当前子数组的下标，仅修改对应下标的展示长度，每次增加4
3. 渲染每个子数组时，使用自身对应的展示长度作为slice方法的结束参数即可

完整代码实现 #

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

function App() {
  const arr = [
    [1, 2, 3, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 3, 4, 5, 6, 7, 8, 9]
  ];
  // 每个下标对应对应位置子数组的展示长度，初始均为4
  const [showCounts, setShowCounts] = useState(arr.map(() => 4));

  const showMore = (index) => {
    setShowCounts(prev => {
      const newCounts = [...prev];
      // 限制最大展示长度不超过子数组本身的长度
      newCounts[index] = Math.min(newCounts[index] + 4, arr[index].length);
      return newCounts;
    })
  };

  return (
    <div className="App">
      {arr.map((subArr, index) => {
        const renderedItems = subArr.slice(0, showCounts[index]);
        return (
          <div key={index}>
            <span>{renderedItems.join(' ')}</span>
            {/* 已展示全部内容时隐藏加载更多按钮 */}
            {showCounts[index] < subArr.length && (
              <span onClick={() => showMore(index)}>{">"}</span>
            )}
          </div>
        );
      })}
    </div>
  );
}

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