Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Comando logo após useState

Olá, todos,

Estou com o seguinte código:

setProjects(projects.push(project));
console.log(projects);

O useState não atualiza no mesmo instante de modo que o console.log retorna vazio.

Eu li sobre utilizar useEffect. O problema é que não quero que o console.log (utilizando isso apenas como exemplo) será executado toda vez que o estado sofra alteração, apenas nessa sequência (uma única vez).

Agradeço desde já!

5 respostas

Fala ai José, tudo bem? Nesse caso você pode criar o novo array antes de atualizar o estado e passar ele para a atualização de estado e log, algo assim:

const newProjects = [...projects, project]
setProjects(newProjects);
console.log(newProjects);

Espero ter ajudado.

E ai, Matheus,

Tudo tranquilo sim e contigo?

Obrigado por receber. Fui simplificar e acabei atrapalhando.

O que eu tenho na realidade é isso:

function updateFile(file_id, data) {
    setUploadedFiles(
      uploadedFiles.map(file => {
        return file_id === file.id ? { ...file, ...data } : file;
      })
    );
  }

  function processUpload(file) {
    const data = new FormData();

    data.append('file', file.file, file.name);

    api.post(`projects/${id}/files`, data, {
      onUploadProgress: e => {
        const progress = parseInt(Math.round((e.loaded * 100) / e.total), 10);
        updateFile(file.id, { progress });
      },
    });
  }

  function handleUpload(dropFiles) {
    const formattedDropFiles = dropFiles.map(dropFile => ({
      file: dropFile,
      id: uniqueId(),
      name: dropFile.name,
      readableSize: filesize(dropFile.size),
      progress: 0,
      uploaded: false,
      error: false,
    }));

    setUploadedFiles(uploadedFiles.concat(formattedDropFiles));
    formattedDropFiles.forEach(processUpload);
  }

handleUpload recebe um conjunto de arquivos e passa cada uma para processUpload para fazer a chamada a API com cada um. A função updateFile atualiza o arquivo, no caso que coloquei ela deveria atualizar o progress, que está sendo renderizado em uma circular-progressbar. O que ocorre é que lá dentro do updateFile quando eu vou utilizar o set o uploadedFiles está vazio.

Tem alguma sugestão para o meu caso em específico?

solução!

Fala José, vamos lá:

Tem alguma sugestão para o meu caso em específico?

Nesse caso, ao invés de você passar o novo valor para a função setUploadedFiles você passa uma outra função, dessa maneira, essa outra função recebe o estado anterior como primeiro parâmetro.

Ficaria assim:

function updateFile(file_id, data) {
    setUploadedFiles(estadoAnterior => estadoAnterior.map(file => file_id === file.id
        ? { ...file, ...data }
        : file
    ));
}

Isso porque a função para atualizar um estado pode ser chamada de duas maneiras, uma recebendo o novo valor:

const [nome, atualizarNome] = useState('')

atualizarNome('Matheus')

O valor padrão seria uma string vazia, onde teria o valor Matheus como novo valor.

Ou, podemos passar uma função e essa função recebe o estado anterior como primeiro parâmetro:

const [nome, atualizarNome] = useState('')

atualizarNome('Matheus')
atualizarNome(estadoAnterior => estadoAnterior.toUpperCase())

Aqui ele pegaria o Matheus e deixaria tudo em caixa alta, ficando: MATHEUS.

Espero ter ajudado.

Ajudou sim, Matheus.

Muito obrigado pela ajuda, cara!

Vou tentar aqui.

Abraço!

Magina José, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software