0

Tenho um código em React que usa o hook useState dessa maneira:

const [tarefas, setTarefas] = useState([]);

É um código de lista de tarefas, toda vez que removo um projeto tenho que atualizar o projeto de cada tarefa, estava tentando fazer assim:

setTarefas(tarefas.map(tarefa => {
    if (tarefa.projeto > id) {
      tarefa.projeto--;
    }
    
    return tarefa;
}

Sendo que o id é o id do projeto que esta sendo excluído. O problema é, ele não atualiza a propriedade projeto da tarefa, continua como se essa parte do código não existisse. Alguém tem alguma ideia do que pode ser?

Logo antes de tentar fazer isso, eu faço o filter no array por meio dessa linha:

setTarefas(tarefas.filter(tarefa => tarefa.projeto !== id));

O que na real esta acontecendo é que ele parece que não filtra, as tarefas não somem. Ele filtra apenas se eu tirar o método que muda o id.

4
  • o que você quer fazer fiquei em duvida?
    – novic
    Commented 19/06/2020 às 0:26
  • você por favor coloque o layout de cada item da tarefa!
    – novic
    Commented 19/06/2020 às 0:27
  • eu quero no caso trocar o id do objeto tarefa se ele for maior que o id que eu passei Commented 19/06/2020 às 1:49
  • projeto: projetoAtual, nome: tarefa.nome, data: tarefa.data, prioridade: tarefa.prioridade, feito: tarefa.feito Commented 19/06/2020 às 1:51

2 Respostas 2

1

O problema está em que precisas de retorna um novo objecto com a propriedade alterada. No React não deves manipular directamente o estado deves calcular um novo estado com base no actual. Tenta assim.

setTarefas(tarefas.map(tarefa => {
    let novaTarefa = {...tarefa}
    if (novaTarefa.projeto > id) {
      novaTarefa.projeto--;
    }
    
    return novaTarefa;
})
5
  • esqueci de falar que logo antes de executar essa linha, eu faco um filter() no meu array de tarefas pra depois fazer essa mudanço. O que acontece é que ele nao ta filtrando, nao ta removendo as tarefas Commented 19/06/2020 às 1:59
  • Mas claro ele não vai remover apenas decrementar a variável.
    – chriptus13
    Commented 19/06/2020 às 2:04
  • mas eu mando filtrar o meu array "tarefas" de acordo com o id que chega como parametro da função, o id do projeto no caso. Se a tarefa tem a propriedade "projeto" igual o id, ela é removida do array, senao ela fica. Commented 19/06/2020 às 2:11
  • setTarefas(tarefas.filter(tarefa => tarefa.projeto !== id)); <=== desse jeito, e logo depois eu faço o que coloquei na pergunta, mudo o projeto pra -1 se for maior que o id. So que quand vou ver,a tarefa nao é removida Commented 19/06/2020 às 2:12
  • Consegues mandar o código por pastebin ou repl.it para perceber melhor o que estás a fazer?
    – chriptus13
    Commented 19/06/2020 às 2:33
1

Pelos comentários, entendi que sua duvida é remover um item de uma lista, se sim, o exemplo logo abaixo pode facilitar o seu entendimento, exemplo:

function App() {
  const [tarefas, setTarefas] = React.useState([
    {'id': 1, 'desc': 'Tarefa 1'},
    {'id': 2, 'desc': 'Tarefa 2'},
    {'id': 3, 'desc': 'Tarefa 3'},
    {'id': 4, 'desc': 'Tarefa 4'},
    {'id': 5, 'desc': 'Tarefa 5'},
  ])
  const styleListType = {
    listStyleType: "none",
    marginTop: 10
  };
  const onRemove = (id) => {
    setTarefas(tarefas.filter(item => item.id !== id));
  }
  return (
    <div>
      <ul>
      {tarefas && tarefas.map((tarefa, index) => (
        <li style={styleListType}>
          <button onClick={() => onRemove(tarefa.id)}>Excluir</button> 
          {' ' + tarefa.desc}
        </li>)
      )}
      </ul>
    </div>
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

sendo que o método onRemove remove o item da lista com um determinado filtro.

Mais alguns exemplos e assuntos relacionados:

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 .