React循环内带条件Slice方法使用问题：点击See more渲染列表项异常如何解决

你现有代码存在三个核心问题，逐一修复即可实现预期效果：

• slice参数语法错误：你把slice需要的两个参数用括号包裹，触发了JavaScript的逗号运算符，会直接返回括号内最后一个表达式的结果。showArticles为true时你实际执行的是slice(items.length)，切出来的是空数组，自然没有内容；为false时实际执行的是slice(3)，也不符合你要取前4条的需求。同时你直接用原数组items的长度作为参数，没有考虑前面filter操作会改变数组长度，逻辑本身也不严谨。
• state更新逻辑无效：按钮的onClick回调里只写了showArticles;，没有调用state对应的更新函数，点击后state不会变化，无法触发重新渲染。
• JSX语法错误：你写的<span>{filteredItem.article}</div>标签匹配错误，span没有正确闭合，会导致渲染报错。

建议先把过滤后的数组单独存储，再做切片处理，逻辑更清晰：

// 假设你声明state的代码为：const [showArticles, setShowArticles] = useState(false)
const filteredItems = items.filter((item) => DateTime.fromISO(item.date).year === lastYear);

// 渲染逻辑
{filteredItems
  // slice左闭右开：false时取前4个（索引0-3），true时取索引4到末尾
  .slice(showArticles ? 4 : 0, showArticles ? undefined : 4)
  .map((filteredItem) => (
    <div key={filteredItem.id /* 列表渲染必须加唯一key，可替换为你业务里的唯一标识 */}>
      <date>{filteredItem.date}</date>
      <span>{filteredItem.article}</span>
    </div>
  ))
}
<button
  onClick={() => {
    setShowArticles(true);
  }}
>
  See more
</button>

如果觉得slice的参数写法不好理解，也可以拆分判断，效果完全一致：

{(showArticles ? filteredItems.slice(4) : filteredItems.slice(0,4)).map((filteredItem) => (
  // 同上渲染逻辑
))}

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