Executando verificação de segurança...
1
Luccas33
1 min de leitura ·

React: Como Remover um Elemento do Array no useState?

Estou tentando remover um item qualquer de uma lista.

O item correto é removido do array, mas na tela é sempre o último que é removido.

Segue o código:

    const [properties, setProperties] = useState(props.data.properties);

    function remove(prop: IProperty) {
        console.log('Prop to remove: ', prop);
        setProperties(current => {
            let newArray = current.filter(p => p.name != prop.name);
            props.data.properties = newArray;
            console.log('Properties: ', newArray);
            return newArray;
        });
    }

Obs: estou usando o Next.js

Carregando publicação patrocinada...
1
gabrielabpedro

A lista está sendo renderizada em uma div usando index como key?

Se sim, talvez quando o mesmo for removido a re-renderização do react se perde na key.

O correto é utilizar alguma propriedade que não se altera, como id.

O seu código parece correto. Pode tentar criar uma referência nova em memória antes de fazer o filtro.

function remove({name}: IProperty) {
    const tempProperties = [...properties];
    tempProperties.filter(p => p.name !== name);
    setProperties(tempProperties);
}
1
gabrielfpereira

Tente isso...

const [properties, setProperties] = useState(props.data.properties);

    function remove(prop: IProperty) {
        console.log('Prop to remove: ', prop);
        setProperties(properties.filter(p => p.name !== prop.name));
    }
1