-2

Olá! tenho um código em react que tem como função adicionar ou remover itens de uma lista. Os itens da lista são componentes filho que vão sendo atualizados a medida que adiciono um novo objeto em um state. Mas ao tentar remover um objeto da lista, ele remove a si próprio e remove também todos os itens seguintes. Por exemplo se há 5 componentes na lista e eu clico no botão do terceiro para remove-lo, ele remove o terceiro, o quarto e o quinto componente da lista, restando apenas o primeiro e o segundo componente. Estou usando a função .filter() e ela está fazendo o trabalho corretamente, mesmo assim o resultado não é o esperado. O que será que estou fazendo errado? Segue o meu código. Obrigado!

Componente pai

import React, { useEffect, useState } from 'react'
import Checkbox from '../components/Checkbox';
import ItemFilho from '../components/ItemFilho';
import SelectSimples from '../components/SelectSimples'

const OpcoesRecomendacoes = ({opcoes, setOpcoes}) => {

  const [itens, setItens] = useState([]);
  const [contador, setContador] = useState(1)
  
  const header = [
    {coluna: "3", nome:"Opções"},
    {coluna: "2", nome:"Subquestão"},
    {coluna: "6", nome:"Recomendação"},
    {coluna: "1", nome:"Ações"}
  ];

  useEffect(() => {
    console.log(itens);
  }, [itens])

  function handleClick() {
    const opcao = document.getElementById("questao-opcao");
    const subquestao = document.getElementById("ativa-subquestao");
    const recomendacao = document.getElementById("questao-recomendacao");
    setItens([
        ...itens, 
        {
          id:contador,
          key:contador,
          opcao:opcao.options[opcao.selectedIndex].text,
          subquestao:subquestao.checked,
          recomendacao:recomendacao.options[recomendacao.selectedIndex].text
        }
      ])
    setContador(contador+1);
  }

  function handleRemove(id) {
    const newItens = itens.filter(componente => componente.id != id );
    setItens(newItens);
  }

  return (
    <>
      <div className="vstack mb-3">
        <div className="px-3 py-2 bg-light bg-opacity-50 shadow-sm border border-bottom-0">
          <div className="row mb-md-1 mb-3">
            {header.map(({coluna, nome}, indice) => <div className={`col-md-${coluna} col-12`} key={indice}>{nome}</div>)}
          </div>
          <div className="row g-md-none gy-3">
            <div className="col-md-3 col-12">
              <SelectSimples model="opcoes" name="questao-opcao" />
            </div>
            <div className="col-md-2 col-12 align-self-end justify-content-center">
              <Checkbox name="ativa-subquestao" id="ativa-subquestao" />
            </div>   
            <div className="col-md-6 col-12">
              <SelectSimples model="recomendacoes-questoes" name="questao-recomendacao" />
            </div>   
            <div className="col-md-1 col-12 align-self-end">
              <button type='button' className="btn btn-outline-success btn-sm" onClick={handleClick}><i className="bi bi-plus"></i></button>
            </div>   
          </div>
        </div>
        <div className="list-group shadow-sm rounded-0">
          {itens.map(item => <ItemFilho {...item} handleRemove={handleRemove} />)}
        </div>
      </div>
    </>
  )
}

export default OpcoesRecomendacoes

Componente filho

import React from 'react'

const ItemFilho = ({id, opcao,subquestao,recomendacao, handleRemove}) => {

  return (
    <div className={`list-group-item px-3 py-1`} key={id} id={id}>
      <div className="row g-md-none gy-3">
        <div className="col-md-3 col-12 ps-md-4">
          {opcao}
        </div>
        <div className="col-md-2 col-12">
          <input type="checkbox" className='form-check-input' checked={subquestao} readOnly />
        </div>   
        <div className="col-md-6 col-12 ps-md-4">
          {recomendacao}
        </div> 
        <div className="col-md-1 col-12">
          <button type='button' className="btn btn-outline-danger btn-sm border-0" onClick={() => handleRemove(id)}>
            <i className="bi bi-trash"></i>
          </button>
        </div> 
      </div>
    </div>
  )
}

export default ItemFilho
2
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    7/01/2022 às 13:13
  • Consegui solucionar! No componente ItemFilho, passei a função handleRemove fora do spread do objeto adicionado e também no momento de adicionar o objeto na lista de componentes filhos, passei os parâmetros como valores e não objetos. Atualizei o código para aproveitamento. Obrigado! 7/01/2022 às 16:39

1 Resposta 1

-4

Olá, Marco! Fiz alguns testes aqui com o seu código e está funcionando corretamente. Percebi que você não está importando os hooks do React (useState e useEffect), mas acredito que não seja esse o problema

As únicas partes do código que modifiquei foram os parâmetros "opcao" e "recomendacao", permitindo que a aplicação pudesse rodar aqui, mas nada no sistema de exclusão de itens.

Usei o framework NextJS para fazer o teste, mas acredito que o resultado seja o mesmo usando CRA ou outro template/framework.

2
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    7/01/2022 às 18:45
  • Olá, Alex! Obrigado por responder. Eu atualizei a pergunta com os imports que voce mencionou, acho que ficaram de fora quando transferi o código. Eu havia conseguido solucionar com alterando para o código atual. Obrigado! 7/01/2022 às 19:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .