[我正在获取item.map，当我尝试删除带有过滤器的项目时，它不是一个函数

Question

我很难知道为什么当我尝试删除一个项目时，为什么会给我一个items.map（）不是一个函数。在添加删除功能之前，将新项目与代码中的items.map（）添加在一起的效果很好。我已经在代码中进行了很多调试，例如将id值传递给onclick函数并定义了一个单独的函数，但它们仍然使我引用了items.map不是函数。

考虑到当我开始添加filter（）时开始出现错误，我认为写过滤器的方式与使items.map不再是函数有关。但是我没有得到错误，对此抱怨，而是我正在获得之前已经使用过的map（）。

我发现关于stackoverflow的类似问题是在谈论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)