时间戳

首页 > 解决方案 > 显示所有按钮 - JSX 逻辑

javascript - 显示所有按钮 - JSX 逻辑

问题描述

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

我有一个包含 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>
  );

标签： javascriptarraysreactjsreact-hooksjsx

解决方案

使用 react 中的 useState 钩子，仅使用 15 个元素来初始化您的可用项目，并映射 avaibleItems 而不是项目，并且 onClick 只需设置 avaibleItems：

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

推荐阅读