Я получаю item.map не является функцией, когда я пытаюсь удалить элемент с фильтром - PullRequest
Новая
       12

Я получаю item.map не является функцией, когда я пытаюсь удалить элемент с фильтром

1 голос
/ 22 апреля 2020

Мне трудно понять, почему, когда я пытаюсь удалить элемент, он дает мне items.map () не является функцией. До того, как я добавил функцию удаления, хорошо было добавить новый элемент с items.map () в коде. Я сделал много отладок в коде, например, передал значения идентификатора в функции onclick и определил отдельную функцию, но все они по-прежнему ссылаются на item.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;

1 Ответ

0 голосов
/ 22 апреля 2020

Вы должны сделать следующее: 

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