显示所有按钮 - JSX 逻辑答案

【问题标题】：Show All Button - JSX Logic显示所有按钮 - JSX 逻辑
【发布时间】：2021-05-28 22:46:19
【问题描述】：

我正在尝试开发一个按钮，一旦我点击它，我就会显示我的购物清单上所有可用的商品。但是我正在努力将所有部分放在一起并提出正确的语法。

我有一个包含 20 个项目的数组，我希望最初只有 15 个（我假设我必须在那里使用 useState？）显示在屏幕上。一旦我单击按钮，它将显示我的购物清单数组中的所有项目。任何机构都可以帮助我构建此功能吗？谢谢:)

const showAll = useCallback(() => {
    const availableItems = items;

    if (availableItems > 15) {
      //STRUGGLING
    }
  }, []);

  return (
    <div className="items.container">
      <ul className="shoplist-items">
        {items.map((item, i) => {
          return (
            <li className="items">
              <div className="single-item" key={i}>
                {item}
              </div>
            </li>
          );
        })}
      </ul>
      <div className="show-all-container">
        <p onClick={showAll}>Show all</p>
      </div>
    </div>
  );

【问题讨论】：

标签： javascript arrays reactjs react-hooks jsx

【解决方案1】：

使用 react 中的 useState 钩子，仅使用 15 个要显示的元素初始化可用项目，并映射 avaibleItems 代替项目，并且 onClick 只需设置 avaibleItems：

const [avaibleItems, setAvaibleItems] = useState(items.slice(0,15); 
const showAll = () =>{ setAvaibleItems(items)}

【讨论】：

非常感谢您的解释！ :)

【解决方案2】：

const allItems = useRef(items);
const [visibleItems, setVisibleItems] = useState(allItems.current.slice(0,15));


const showAll = useCallback(() => {
    if(allItems.current.length > 15) {
      setVisibleItems(allItems.current);
    }
}

  return (
    <div className="items.container">
      <ul className="shoplist-items">
        {visibleItems.map((item, i) => {
          return (
            <li className="items">
              <div className="single-item" key={i}>
                {item}
              </div>
            </li>
          );
        })}
      </ul>
      <div className="show-all-container">
        <p onClick={showAll}>Show all</p>
      </div>
    </div>
  );

【讨论】：

这太棒了，而且效果很好！非常非常感谢！