Meu estado selecionado não se atualiza. | React: escrevendo com Typescript

3
respostas

Referente ao curso React: escrevendo com Typescript, no capítulo Selecionando um item e atividade Mostrando a tarefa selecionada

por Kelwin Deriz Hollunder

| 156.2k xp | 114 posts

Designer Gráfico

Estou fazendo esse curso pela segunda vez, mas agora codando por minha própria conta, até agora estava tudo dando certo, até que tive o problema do meu selected nunca ficar true.

Já tentei deixar a id pelo uuid assim como tbm já tentei deixar uma fixa, mas mesmo assim não passa pela verificação do ternário.

Me ajudem por favor, pois já não sei o que fazer.

Código do APP.tsx :

import React, { useState } from 'react';
import Form from '../components/form';
import List from '../components/task-list';
import Cron from '../components/cronometer';
import style from './App.module.scss';
import { ITask } from '../types/ITask';

export default function App() {
    const [tasks, setTasks] = useState<ITask[]>([]);
    const [selected, setSelected] = useState<ITask>();

    function select(taskSelected: ITask) {
      setSelected(taskSelected);
      setTasks(oldTasks => oldTasks.map(task => ({
        ...task,
        selected: task.id === taskSelected.id ? true : false
      })))
      console.log(taskSelected);
    }
  return (
    <main className={style.app}>
      <div className={style.tasks}>
        <Form setTasks={setTasks}/>
        <Cron />
      </div>
      <List tasks={tasks} select={select}/>
    </main>
  );
}

Código da lista:

import Item from '../task-list/item';
import style from './list.module.scss';
import { ITask } from '../../types/ITask'
import { v4 as uuidv4 } from 'uuid';

interface Props {
    tasks: ITask[],
    select: (taskSelected: ITask) => (void)
}

function List ({ tasks, select } : Props) {
    return(
        <section className={style.section}>
            <h2 className={style.titulo}>Estudos do dia</h2>
            <ul className={style.lista}>
                {tasks.map((item, index) => (
                    <Item 
                        task={item.task}
                        time={item.time}
                        id={uuidv4()}    
                        completed={false}
                        selected={false}
                        key={item.id}                        
                        select={select}                   
                        />
                ))}
            </ul>
        </section>
    )
}

export default List;

Código do item

import style from '../../task-list/list.module.scss';
import { ITask } from '../../../types/ITask';

interface Props extends ITask{
    select: (taskSelected: ITask) => void
}

export default function Item({
                        task,
                        time,
                        completed,
                        selected,
                        id,
                        select
                            }: Props) {
    return (
        <li className={`${style.item} ${selected ? style.itemSelecionado : ''}`}
            onClick={() => select({
                task,
                time,
                completed,
                selected,
                id
            })}>
            <h3 className={style.nomeItem}>{task}</h3>
            <span className={style.tempoItem}>{time}</span>
        </li>
    )
}

3 respostas

por Kelwin Deriz Hollunder

| 156.2k xp | 114 posts

Designer Gráfico

17/08/2022

Obs: eu até consigo identificar qual tarefa foi capturada com o clique, mas não consigo atualizar ela.

por Kelwin Deriz Hollunder

| 156.2k xp | 114 posts

Designer Gráfico

17/08/2022

Resolvi o problema tirando os props do ITEM e passando via spread de item.

Funcionou e está resolvido, mas gostaria de saber o porque.

por Lorena Garcia

| 6918.5k xp | 10062 posts

Alura Scuba Team Monitora

25/04/2023

Oi Kelwin, tudo bem?

Desculpe a demora em retornar.

Ao selecionar um item da lista, você está passando a tarefa selecionada como parâmetro para a função "select", que atualiza o estado do item selecionado usando o hook "useState". Então, você está percorrendo a lista de tarefas usando o método "map" e atualizando o estado do item selecionado para "true" apenas para a tarefa selecionada, e "false" para todas as outras tarefas.

Pelo que entendi, o problema que você estava enfrentando era que o item selecionado não estava sendo atualizado corretamente. Você tentou deixar a ID da tarefa como UUID e também como um valor fixo, mas mesmo assim não passava pela verificação do ternário.

Você mencionou que conseguiu resolver o problema passando todos os props do item através do spread operator, em vez de passá-los separadamente. Ao fazer isso, você conseguiu atualizar corretamente o estado do item selecionado.

Isso aconteceu porque, quando você passa os props separadamente, eles se tornam imutáveis e não podem ser alterados diretamente. Mas, ao passá-los via spread operator, você está criando uma cópia dos props e, dessa forma, eles podem ser atualizados normalmente.

Aqui está um exemplo simples de como isso funciona:

// Exemplo sem spread operator
function Item(props) {
  return (
    <li onClick={() => props.select(props.id)}>
      <h3>{props.task}</h3>
      <span>{props.time}</span>
    </li>
  );
}

// Exemplo com spread operator
function Item(props) {
  return (
    <li onClick={() => props.select(props.id)}>
      <h3>{...props.task}</h3>
      <span>{...props.time}</span>
    </li>
  );
}

No primeiro exemplo, estamos passando os props separadamente e, portanto, eles são imutáveis. No segundo exemplo, estamos passando os props via spread operator, o que nos permite atualizar as propriedades do objeto normalmente.

Espero que isso tenha ajudado a entender o motivo pelo qual o seu código não estava atualizando corretamente o item selecionado.

Um abraço e bons estudos.