-1

Bom dia.

Eu tenho um banco de dados pré-definido ("db"), de onde leio os dados. Preciso poder editar e remover cada linha (ainda não desenvolvi a parte de editar).

Quando uso a função removerItem() vejo no console que o item até chega a ser removido, mas não está atualizando a visualização. Alguém pode me ajudar a resolver esse problema?

import React from 'react';
import './Router.scss';
import {useState} from 'react';
import Pencil from '../../images/pencil.svg'
import Trash from '../../images/trash.svg'

const Router = () => {
  const db = [
    { "id": 1, "title": "Exercicios", "description": "Ir para academia fazer exercicios", "completed": true },
    { "id": 2, "title": "Limpar o carro", "description": "Limpar o carro inteiro, de dentro pra fora", "completed": false },
    { "id": 3, "title": "Banho e tosa", "description": "Levar o cachorro ao pet shop", "completed": false },
    { "id": 4, "title": "Limpar quarto", "description": "Limpar toda bagunça que está dentro do quarto", "completed": true },
    { "id": 5, "title": "trabalhar", "description": "Chegar ao escritorio antes das 20:00", "completed": true },
    { "id": 6, "title": "Ir ao banco", "description": "Chear ao banco antes das 10:00", "completed": false },
    { "id": 7, "title": "Almoçar", "description": "Preparar a comida para a janta", "completed": false },
    { "id": 8, "title": "Jogar volei", "description": "Ir a quadra para jogar volei com os amigos", "completed": true },
    { "id": 9, "title": "Estudar programação", "description": "Entrar na plataforma dos alunos para estudar", "completed": false },
    { "id": 10, "title": "shopping", "description": "Fazer algumas compras no shopping", "completed": true }
  ]

 return (
    <div className="Tasks">
      <h1>Otimize seu tempo e se organize com o nosso Planejador Diário.</h1>
      <table>
        <thead>
          <tr>
            <th id="tarefa" className="tdtdwidth">Tarefa</th>
            <th className="StatusOpcoesAlign">Status</th>
            <th className="StatusOpcoesAlign">Opções</th>
          </tr>
        </thead>
        <hr/>
        <tbody>
          {db.map(task => {
            const [array, setArray] = useState(db);

            const removeItem = (id) => {
              console.log(array)
              
              /*const newData = [...array]
              newData.splice((id-1), 1)
              setArray(newData)*/
              
              const newData = array.filter((e) => e.id !== id)
              setArray(newData)
              console.log(newData)
            }

            const [checked, setChecked] = useState(task.completed);
            
              function mudarEstado(){
                setChecked (!checked);
              }

            return (
              <tr key={task.id}>
                <td className="tooltip">{task.title}<span className="tooltiptext">{task.description}</span></td>
                <td className="StatusOpcoesAlign">
                  <input
                    type="checkbox"
                    label="statusbox"
                    title="statusbox"
                    id={task.id}
                    value={task.completed}
                    checked={checked}
                    onChange={mudarEstado}
                  />
                </td>
                <td className="StatusOpcoesAlign">
                  <button><img src={Pencil} /></button>
                  <button onClick={() => removeItem(task.id)}><img src={Trash} /></button>
                 </td>

              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  )
}

export default Router

edição posterior

O seguinte código funcionou:

import React from 'react';
import './Router.scss';
import {useState} from 'react';
import Pencil from '../../images/pencil.svg'
import Trash from '../../images/trash.svg'

const Router = () => {
  const db = [
    { "id": 1, "title": "Exercicios", "description": "Ir para academia fazer exercicios", "completed": true },
    { "id": 2, "title": "Limpar o carro", "description": "Limpar o carro inteiro, de dentro pra fora", "completed": false },
    { "id": 3, "title": "Banho e tosa", "description": "Levar o cachorro ao pet shop", "completed": false },
    { "id": 4, "title": "Limpar quarto", "description": "Limpar toda bagunça que está dentro do quarto", "completed": true },
    { "id": 5, "title": "trabalhar", "description": "Chegar ao escritorio antes das 20:00", "completed": true },
    { "id": 6, "title": "Ir ao banco", "description": "Chear ao banco antes das 10:00", "completed": false },
    { "id": 7, "title": "Almoçar", "description": "Preparar a comida para a janta", "completed": false },
    { "id": 8, "title": "Jogar volei", "description": "Ir a quadra para jogar volei com os amigos", "completed": true },
    { "id": 9, "title": "Estudar programação", "description": "Entrar na plataforma dos alunos para estudar", "completed": false },
    { "id": 10, "title": "shopping", "description": "Fazer algumas compras no shopping", "completed": true }
  ];

const [array, setArray] = useState(db);

const [checked, setChecked] = useState(db.completed);
            
function mudarEstado(){
  setChecked (!checked);
}

const removeItem = (id) => {
  console.log(array)
             
  const newData = array.filter((e) => e.id !== id);
  setArray(newData);
  console.log(newData)
  
};

 return (
    <div className="Tasks">
      <h1>Otimize seu tempo e se organize com o nosso Planejador Diário.</h1>
      <table>
        <thead>
          <tr>
            <th id="tarefa" className="tdtdwidth">Tarefa</th>
            <th className="StatusOpcoesAlign">Status</th>
            <th className="StatusOpcoesAlign">Opções</th>
          </tr>
        </thead>
        <hr/>
        <tbody>
          {array.map((task) => {
            

            return (
              <tr key={task.id}>
                <td className="tooltip">{task.title}<span className="tooltiptext">{task.description}</span></td>
                <td className="StatusOpcoesAlign">
                  <input
                    type="checkbox"
                    label="statusbox"
                    title="statusbox"
                    id={task.id}
                    value={task.completed}
                    checked={checked}
                    onChange={mudarEstado}
                  />
                </td>
                <td className="StatusOpcoesAlign">
                  <button><img src={Pencil} /></button>
                  <button onClick={() => removeItem(task.id)}><img src={Trash} alt="Remover"/></button>
                 </td>

              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  )
}


export default Router

1 Resposta 1

0

O problema que você está enfrentando é devido ao uso do estado local array dentro do loop map para representar os itens da lista. Quando você chama a função removeItem, você está atualizando o estado array, mas como está definido dentro do loop, ele é recriado a cada iteração, resultando em comportamento inesperado.

Para resolver esse problema, é recomendado elevar o estado array para fora do loop map e gerenciar o estado da lista a partir de um único ponto. Isso garantirá que a atualização do estado seja consistente em todas as iterações do loop.

Aqui está como você pode reestruturar o código:

import React, { useState } from 'react';
import './Router.scss';
import Pencil from '../../images/pencil.svg';
import Trash from '../../images/trash.svg';

const Router = () => {
  const initialDb = [
    // ... os dados do db aqui
  ];

  const [array, setArray] = useState(initialDb);

  const removeItem = (id) => {
    const newData = array.filter((e) => e.id !== id);
    setArray(newData);
  };

  return (
    <div className="Tasks">
      {/* ... restante do código ... */}
      <tbody>
        {array.map((task) => {
          const [checked, setChecked] = useState(task.completed);

          function mudarEstado() {
            setChecked(!checked);
          }

          return (
            <tr key={task.id}>
              {/* ... restante do código ... */}
              <td className="StatusOpcoesAlign">
                <button onClick={() => removeItem(task.id)}>
                  <img src={Trash} alt="Remover" />
                </button>
              </td>
            </tr>
          );
        })}
      </tbody>
    </div>
  );
};

export default Router;

Nesse exemplo, o estado array é definido fora do loop map, no nível mais alto do componente. A função removeItem também está definida no mesmo nível, e ela atualiza o estado array diretamente. Isso garantirá que as atualizações de estado sejam refletidas de maneira consistente em toda a renderização.

4
  • Caramba. Que resposta rápida hehehe Apareceu o erro "Rendered fewer hooks than expected. This may be caused by an accidental early return statement." Vc tem ideia do que pode ser? Será que é o caso de usar useEffect? No console eu vejo que o item foi removido, mas dá erro na renderizção
    – Duds
    Commented 31/08/2023 às 12:24
  • No seu caso, parece que o erro pode estar relacionado ao local onde você está chamando o useState para checked. Certifique-se de que esse useState seja sempre chamado em todas as renderizações daquele componente, independentemente de quaisquer condições. Se você puder compartilhar o trecho de código relevante onde você está usando o useState para checked, posso ajudar a identificar a possível causa do erro com mais precisão. Certifique-se de que o useState para checked seja chamado na renderização principal e também dentro de qualquer iteração, se houver alguma. Commented 31/08/2023 às 12:26
  • Moço, não seu nem como te agradecer pela ajuda!!!! Editei minha pergunta pra adicionar o novo código, funcionando.
    – Duds
    Commented 31/08/2023 às 12:36
  • Fico feliz em ter ajudado! :) Commented 31/08/2023 às 12:40

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 .