React中循环内的切片方法答案

【问题标题】：Slice method with condition within loop in ReactReact中循环内的切片方法
【发布时间】：2021-11-01 12:55:40
【问题描述】：

如果状态为假，我想渲染 0 到 3 个项目，如果状态为真，我想通过单击 See more 渲染 4 到数组长度的末尾

我有以下代码，但它出错了：

{items
                .filter((item) => DateTime.fromISO(item.date).year === lastYear)
                **.slice(showArticles ? (4, items.length) : (0, 3))**
                .map((filteredItem) => (
                        <div>
                            <date>{filteredItem.date}</date>
                            <span>{filteredItem.article}</div>
                        </div>

                ))}
            <button
                onClick={() => {
                    showArticles;
                }}
            >
                See more
            </button>

当前切片条件正在生成，因此不会渲染任何内容。如何相应地展示我的商品？

【问题讨论】：

标签： javascript arrays reactjs slice

【解决方案1】：

您可以将 args 数组传播到 slice 方法中。请记住，结束索引被排除在外，因此如果您想要元素 0-3，请指定 slice(0, 4)。

Array.prototype.slice

slice() 方法返回数组一部分的浅拷贝进入从start 到end 选择的新数组对象（end 不包括）其中start 和end 表示该数组中项目的索引。这原数组不会被修改。

items.filter((item) => DateTime.fromISO(item.date).year === lastYear)
  .slice(...(showArticles ? [4] : [0, 4])) // 4 through the end, or 0 to 3
  .map((filteredItem) => (....

function App() {
  const [showArticles, setShowArticles] = React.useState();

  return (
    <div className="App">
      <button type="button" onClick={() => setShowArticles((s) => !s)}>
        Toggle
      </button>

      {Array.from({ length: 10 }, (_, i) => i)
        .slice(...(showArticles ? [4] : [0, 4]))
        .map((el) => (
          <li key={el}>{el}</li>
        ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

【讨论】：

【解决方案2】：

你在切片中有一个额外的()，这应该是它：

{items
  .filter((item) => DateTime.fromISO(item.date).year === lastYear)
  .slice(showArticles ? 4 : 0, showArticles ? items.length : 3)
  .map((filteredItem) => (
          <div>
              <date>{filteredItem.date}</date>
              <span>{filteredItem.article}</div>
          </div>

))}

【讨论】：