时间戳

首页 > 解决方案 > Reactjs - 数组映射保留旧数组而不是替换

javascript - Reactjs - 数组映射保留旧数组而不是替换

问题描述

我面临这个问题，我有两个数组，它应该映射到页面导航上的一个数组。但它保留旧数组并添加新数组，而不是用新数组替换旧数组。

大批：

const array = [
 {
     title: 'itme 1',
     category: 'summer',
 },
 {
     title: 'item 2',
     category: 'summer',
 },
 {
     title: 'item 3',
     category: 'summer',
 },
 {
     title: 'item 4',
     category: 'summer',
 },
 {
     title: 'item 5',
     category: 'summer',
 },
 {
     title: 'item 6',
     category: 'winter',
 },
 {
     title: 'item 7',
     category: 'winter',
 },
 {
     title: 'item 8',
     category: 'winter',
 },
 {
     title: 'item 9',
     category: 'winter',
 },
 {
     title: 'item 10',
     category: 'winter',
 },
]

export default array

列表页：

import { useRouter } from 'next/router'
import array from './array'

function page1() {
  const router = useRouter()
  const matchName = router.query.name

 const itemsArray = array.filter(array => array.category === matchName)
 const [listItems, setListItems] = useState(itemsArray.slice(0, 3))

 useEffect(() => {
    setListItems(itemsArray.slice(0, 3))
 }, [ProductMatch])

 return (
   <>
     listItems.map(listItems => <p>listItems</p>)
   </>
 )
}

console.log(itemsArray)and的输出console.log(listItems)是正确的，如果 url 发生变化，我会根据过滤条件获取项目。但listItems.map()保留旧的过滤条件项目并添加新项目。因此列表最终将“夏季”和“冬季”项目放在一起。

电流输出：

来自 mysite.com/name/summer

<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
<p>item 4</p>
<p>item 5</p>

到 mysite.com/name/winter

<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
<p>item 4</p>
<p>item 5</p>
<p>item 6</p>
<p>item 7</p>
<p>item 8</p>
<p>item 9</p>
<p>item 10</p>

所需的输出：

来自 mysite.com/name/summer

<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
<p>item 4</p>
<p>item 5</p>

到 mysite.com/name/winter

<p>item 6</p>
<p>item 7</p>
<p>item 8</p>
<p>item 9</p>
<p>item 10</p>

标签： javascriptreactjsnext.js

解决方案

您可以尝试将key道具添加到您的 JSX 吗？

   listItems.map(listItems => <p key={listItems.title}>listItems</p>)

推荐阅读