Блог

Главная - Вопросы по программированию - удаление объектов из массива с помощью фильтра — useState

удаление объектов из массива с помощью фильтра — useState

#reactjs #filter #use-state

Вопрос:

Я пытаюсь удалить объект из массива с помощью .filter (), но, похоже, он работает неправильно. Метод, который я пытаюсь сделать, правильный, и он правильно отображает идентификатор элемента, но не удаляет его окончательно.

Приложение.jsx

 // Adding activity names handler
const [value, setValue] = useState('');
const [activities, setName] = useState([
    { id: 0, name: 'Feel free to add, edit and delete!' }
]);
const handleSetName = () => {
    const activity = {
        id: Math.random() * 10000,
        name: value
    };
    if (activity.name.length >= 3) {
        var names = activities.concat(activity)
    }
    setName(names);
};

// IMPORTANT SECTION -----------------------------------------------------
const [filteredActivityNames, delActivity] = useState([]);

const handleDelActivity = id => {

    const filteredActivityNames = [...activities];

    const names = filteredActivityNames.filter(name => name.id !== id);

    delActivity(names);
    console.log(id);
};
//  ----------------------------------------------------------------------

// Activity Component
const activityComponent = activities.map(activity => (
    <Activity
        key={activity.id}
        activityName={activity.name}
        deleteActivity={() => handleDelActivity(activity.id)}
    />
))

return (
  <section>
    <input value={value} onChange={e => setValue(e.target.value)}>
    <button onClick={handleAddActivity}>Add</button>
  </section>
  {activityComponent}
);

Активность.jsx

 export const Activity = ({ activityName, deleteActivity }) => {
    return(
        <section>
            <h3>{activityName} <span onClick={deleteActivity}> Delete </span> </h3>
        </section>
    )
};

Комментарии:

1. «Метод, которым я пытаюсь это сделать, правильный», тогда в чем проблема?

2. @Dexygen Хотел бы я знать.

3. Вы перепутали свое состояние, тщательно проверьте их, чтобы решить проблему.

4. Для чего это нужно const [filteredActivityNames, delActivity] = useState([]); ? Вам нужно избавиться от него и позвонить setNames(names) вместо delActivity(names) этого .

5. Когда вы говорите «не удаляете его окончательно», как именно вы проверяете? Как вы добавляете действия? Не могли бы вы показать handleAddActivity() код? при удалении, в handleDelActivity() вас установлено filteredActivityNames . Поэтому после удаления у вас должен быть отфильтрованный массив filteredActivityNames . Имена переменных, которые вы используете, немного сбивают с толку. Идиоматический способ для useState() крючка-называть переменные , такие как [activities, setActivities] и [filteredActivityNames, setFilteredActivityNames] т. Д., Поскольку они работают с одним и тем же объектом состояния. Один, чтобы прочитать его, другой, чтобы обновить.

Ответ №1:

Вы перепутали свое состояние. Вот небольшой фрагмент, который демонстрирует, что вы ищете:

 const _items = [{
    id: 1,
    label: 'Item 1'
  },
  {
    id: 2,
    label: 'Item 2'
  }
]

function ItemsDisplay() {
  const [items, setItems] = useState(_items)


  return items.map(item => {
    const {
      id,
      label
    } = item


    const handleDelete = () => {
      const newItems = items.filter(item => item.id !== id)
      setItems(newItems)

    }

    return ( 
    <div key={id} onClick={handleDelete}>{label}</div>
    )
  })

}

const reactElement = documment.getElementById('react-app')
ReactDOM.render( < ItemsDisplay / > , reactElement) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

<body>
  <div id='react-app' />
</body>
Метки: