0

Eu estou usando o react hooks para ordenar uma lista de array pelo item 'points' após eu atualizar o item de um objeto. Depois de muito mexer no código eu consegui ordenar o Array na variável 'sorted' utilizando o useMemo (que confesso que eu não entendi muito bem como funciona).

Porém agora eu não consigo utilizar o useState setStudents(sorted) pra transferir essa variável pra interface. Se eu coloco o setStudents(sorted) dentro da do useEffect ou da função changePontuation ele ignora a mudança da variável 'points'

function App() {
  const [students, setStudents] = useState([
    { name: 'Letícia Lima', id: 1, points: 12090 },
    { name: 'Flávia Augusto', id: 2, points: 11276 },
    { name: 'Douglas Adams', id: 3, points: 11181 },
    { name: 'Carina Rosa', id: 4, points: 11019 },
    { name: 'Amanda Nunes', id: 5, points: 10981 },
    { name: 'Fabrício Frazoli', id: 6, points: 10756 },
  ]);

  useEffect(() => {
    const timer = setTimeout(() => {
      changePontuation();
    }, 2000);
    console.log(sorted);
  }, []);

  function changePontuation() {
    let changedStudents = [...students];
    changedStudents[2] = { ...students[2], points: 11297 };
    setStudents(changedStudents);
    console.log('executando função interval');
  }
  const sorted = React.useMemo(() =>
    students.slice().sort((a, b) => b.points - a.points)
  );
  console.log(sorted);
1
  • Poderia colocar o código todo por gentileza? useMemo é utilizado para "memorizar o resultado" de uma computação pesada , no seu caso ele não tá fazendo nada porque você não está passando as dependências.
    – iwaduarte
    Commented 10/09/2020 às 2:16

1 Resposta 1

0

O estado está sendo alterado normalmente e o useMemo e o Slice creio que sejam desnecessários:

https://codesandbox.io/s/stackoverflow-students-kj4lt?file=/src/App.js:583-584

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [students, setStudents] = useState([
    { name: "Letícia Lima", id: 1, points: 12090 },
    { name: "Flávia Augusto", id: 2, points: 11276 },
    { name: "Douglas Adams", id: 3, points: 11181 },
    { name: "Carina Rosa", id: 4, points: 11019 },
    { name: "Amanda Nunes", id: 5, points: 10981 },
    { name: "Fabrício Frazoli", id: 6, points: 10756 }
  ]);

  useEffect(() => {
    const timer = setTimeout(() => {
      changePontuation();
    }, 2000);
  }, []);

  function changePontuation() {
    let changedStudents = [...students];
    changedStudents[2] = { ...students[2], points: 11297 };
    setStudents(changedStudents);
    console.log("executando função interval");
  }

  const sorted = students.sort((a, b) => b.points - a.points);

  const createView = (student) => {
    const { id, name, points } = student;

    return (
      <p key={id}>
        {name}
        {points}
      </p>
    );
  };

  return <div className="App">{students.map(createView)}</div>;
}
1
  • Funcionou perfeitamente. Obrigado.
    – Pedro
    Commented 10/09/2020 às 10:54

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 .