当我尝试使用过滤器删除项目时，我得到 item.map is not a function

Question

我很难理解为什么当我尝试删除一个项目时，它给我一个 items.map() 不是函数。在我添加删除功能之前，在代码中使用 items.map() 添加新项目效果很好。我在代码中做了很多调试，比如将 id 值传递给 onclick 函数并定义了一个单独的函数，但它们仍然让我知道 items.map 不是函数。

考虑到是在我添加 filter() 时开始出现错误，我认为我编写过滤器的方式导致 items.map 不是函数。但我没有得到错误，抱怨那个，而是我得到了我之前已经使用过的 map() 。

我在 Whosebug 上发现的类似问题是关于 map() 函数使用数组而不是对象。但在我的例子中，项目被声明为一个对象数组，而不是一个对象。

请任何熟悉错误的人提供见解。

import React, { useState } from 'react'
import {Container, ListGroup, ListGroupItem, Button} from 'reactstrap'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
//import uuid from 'uuid/v4'
import {v4 as uuid} from 'uuid'


const ShoppingList = (props) => {
const [items, setItems] = useState([
    {id: uuid(), name: 'Eggs'},
    {id: uuid(), name: 'Apple'},
    {id: uuid(), name: 'Mangoes'},
])


return (
    <div>
    <Container>
        <Button color="dark" style={{marginBottom: "2rem"}} onClick={() => {
            const name=prompt('Enter Name');
            if (name) {
                setItems([...items, {id: uuid(), name}])
            }
         }}>Add Item </Button>

         <ListGroup>
             <TransitionGroup className="shopping-list">
             {items.map((item)=>(

                 <CSSTransition key={item.id} timeout={500} classNames="fade">
                     <ListGroupItem>
                        <Button
                            className="remove-btn"
                            color="danger"
                            size="sm"
                            onClick={()=> {
                                setItems(prevState => ({
                                items: items.filter(x => x.id !== item.id)
                            }))
                        }
                        }
                        >&times;
                        </Button>
                     {item.name}
                     </ListGroupItem>
                 </CSSTransition>

                 ))}
             </TransitionGroup>
         </ListGroup>
    </Container>
    </div>
)
}

 export default ShoppingList;

Answer 1

您应该执行以下操作：

setItems(prevState => prevState.filter(x => x.id !== item.id)

Answer 2

s=11=ssetitems(prestand => s=12=s(s => s=13=s !== s=14=s)s=10=s

当我尝试使用过滤器删除项目时，我得到 item.map is not a function

I'm getting item.map is not a function when I try to delete an item with filter

arrays

filter

reactjs

reactstrap