Реагировать на использованиеState обновление проблематично

Question

Здравствуйте, сообщество Stackoverflow,

У меня сложная проблема с useState. Я хочу удалить элемент из массива, и после этого я хочу сделать некоторые проверки и вызов xhr. Позвольте мне привести пример:

const [items, setItems] = useState([{ id: 'xxx', email: 'xxx@xxx.com' }, { id: 'yyy', email: 'xxx@xxx.com' }]);

const handleRemoveItem = async (index) => {
    const itemEmail = items[index].email;
    const itemsCopy = [...items];
    itemsCopy.splice(index, 1); <-- Remove one item, one should be left
    setItems(itemsCopy);

    const isUnique = await checkUnique(email);
    if(!isUnique) {
        // do something
    }
}

const checkUnique = async (email) => {
    const hasDuplicates = items.filter(item => item.email === email).length > 1; <-- items has already 2 items, but before one was removed
    if(hasDuplicates) {
        return false;
    }

    // Some XHR calls to check the email already exists

}

Проблема в том, что элементы в checkUnique по-прежнему содержат два элемента. Я не могу использовать useEffect, потому что мне нужен удаленный элемент в вызове xhr. И я не хочу помнить удаленный элемент, потому что это трудно понять и излишне. У кого-нибудь есть идеи, как решить эту проблему? Я думал о передаче itemsCopy до checkUnique в качестве параметра, но так ли это до go?

Answer 1

Просто используйте это так; Должно помочь;

const handleRemoveItem = async (index) => {
const itemEmail = items[index].email;

setItems((prevState) => {
  return prevState.splice(index, 1);
});

const isUnique = await checkUnique(itemEmail);
if (!isUnique) {
  // do something
}
};