0

Pessoal montei uma tabela com os dados de um array onde terá pontos de ataque e defesa de cada player associado a uma equipe. Terá o total de pontos de ataque e defesas de cada player e um último total que soma o total de ataque e o total de defesa de cada player. Abaixo uma imagem para entender o que estou dizendo:

inserir a descrição da imagem aqui

O meu problema é que quero ordenar em decrescente a coluna "SOMA A/B". Sei que no javascript tem o método sort, mas não conseguir utiliza para o meu problema. Abaixo uma imagem de como quero que fique.

inserir a descrição da imagem aqui

Agradeço se alguém pelo menos me der uma idéia. Meu código abaixo:

console.clear()

const Debug = () => {
    const [players, setPlayers] = React.useState([
        {
            name: 'Tiago',
            teams: [
                { name: 'Invictos', attack: 18, defense: 5 },
                { name: 'Warrions', attack: 10, defense: 2 },
            ],
        },
        {
            name: 'Carlos',
            teams: [
                { name: 'Invictos', attack: 13, defense: 7 },
                { name: 'Warrions', attack: 9, defense: 3 },
            ],
        },
        {
            name: 'Ana',
            teams: [
                { name: 'Invictos', attack: 18, defense: 8 },
                { name: 'Warrions', attack: 17, defense: 5 },
            ],
        },
    ])

    return (
        <div>
            <table style={{ textAlign: 'center', border: '1px solid #000' }}>
                <thead>
                    <tr>
                        <th rowSpan="2">#</th>
                        <th rowSpan="2">Nome</th>
                        <th colSpan="2">Invictos</th>
                        <th colSpan="2">Warrions</th>
                        <th colSpan="2">Total</th>
                        <th>Soma A/D</th>
                    </tr>

                    <tr>
                        <td>Ataques</td>
                        <td>Defesas</td>
                        <td>Ataques</td>
                        <td>Defesas</td>
                        <td>Ataques</td>
                        <td>Defesas</td>
                    </tr>
                </thead>
                <tbody>
                    {players.map((player, index) => (
                        <tr key={index}>
                            <td>{index + 1}</td>
                            <td>{player.name}</td>
                            {player.teams.map((p, i) => (
                                <React.Fragment key={i}>
                                    <td>{p.attack}</td>
                                    <td>{p.defense}</td>
                                </React.Fragment>
                            ))}
                            <td>{player.teams.reduce((a, b) => a + b.attack, 0)}</td>
                            <td>{player.teams.reduce((a, b) => a + b.defense, 0)}</td>
                            <td>
                                {player.teams.reduce((a, b) => a + b.attack, 0) +
                                    player.teams.reduce((a, b) => a + b.defense, 0)}
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

ReactDOM.render(<Debug />, document.querySelector('#root'))
<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

2
  • crescente ou decrescente? Voce falou uma coisa e na imagem mostrou outra. Por que nao cria um novo estado que guarda os objetos com os valores calculados e entao renderiza a partir deste novo objeto? 18/12/2020 às 21:23
  • Olá amigo, é decrescente mesmo, já corrigir foi erro de digitação. Eu pensei nisso, mas não conseguir encontrar uma forma de concatenar com o restante dos dados. Poderia me mostrar um exemplo? 18/12/2020 às 21:49

2 Respostas 2

2

Crie um novo estado chamado sumary para fazer o resumo do array do estado players e a mesma operação que é feita direto na tabela faz em algum método ou quando carregar o componente. Na sumarização dos resultados coloque a função de ordernação pelo campo sum criado como demonstrado nesse código:

React.useEffect(() => {
  const items = players.map(p => {
    const attack = p.teams
      .reduce((a, b) => a + b.attack, 0);
    const defense = p.teams
      .reduce((a, b) => a + b.defense, 0);        
    const sum = attack + defense;          
    return {
      name: p.name,
      teams: [...p.teams],
      attack,
      defense,
      sum
    }
  });
  items.sort((a,b) => b.sum - a.sum);
  setSumary(state => [...items]);  
}, [players]);

e a partir desse código fiz o exemplo completo com as duas tabelas:

const Debug = () => {
    const [sumary, setSumary] = React.useState([]);
    const [players, setPlayers] = React.useState([
        {
            name: 'Tiago',
            teams: [
                { name: 'Invictos', attack: 18, defense: 5 },
                { name: 'Warrions', attack: 10, defense: 2 },
            ],
        },
        {
            name: 'Carlos',
            teams: [
                { name: 'Invictos', attack: 13, defense: 7 },
                { name: 'Warrions', attack: 9, defense: 3 },
            ],
        },
        {
            name: 'Ana',
            teams: [
                { name: 'Invictos', attack: 18, defense: 8 },
                { name: 'Warrions', attack: 17, defense: 5 },
            ],
        },
    ])
    React.useEffect(() => {
      const items = players.map(p => {
        const attack = p.teams
          .reduce((a, b) => a + b.attack, 0);
        const defense = p.teams
          .reduce((a, b) => a + b.defense, 0);        
        const sum = attack + defense;          
        return {
          name: p.name,
          teams: [...p.teams],
          attack,
          defense,
          sum
        }
      });
      items.sort((a,b) => b.sum - a.sum);
      setSumary(state => [...items]);            
    }, [players]);
    return (
        <div>
            <table style={{ textAlign: 'center', border: '1px solid #000' }}>
                <thead>
                    <tr>
                        <th rowSpan="2">#</th>
                        <th rowSpan="2">Nome</th>
                        <th colSpan="2">Invictos</th>
                        <th colSpan="2">Warrions</th>
                        <th colSpan="2">Total</th>
                        <th>Soma A/D</th>
                    </tr>

                    <tr>
                        <td>Ataques</td>
                        <td>Defesas</td>
                        <td>Ataques</td>
                        <td>Defesas</td>
                        <td>Ataques</td>
                        <td>Defesas</td>
                    </tr>
                </thead>
                <tbody>
                    {players.map((player, index) => (
                        <tr key={index}>
                            <td>{index + 1}</td>
                            <td>{player.name}</td>
                            {player.teams.map((p, i) => (
                                <React.Fragment key={i}>
                                    <td>{p.attack}</td>
                                    <td>{p.defense}</td>
                                </React.Fragment>
                            ))}
                            <td>{player.teams.reduce((a, b) => a + b.attack, 0)}</td>
                            <td>{player.teams.reduce((a, b) => a + b.defense, 0)}</td>
                            <td>
                                {player.teams.reduce((a, b) => a + b.attack, 0) +
                                    player.teams.reduce((a, b) => a + b.defense, 0)}
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
            <hr/>
            <table style={{ textAlign: 'center', border: '1px solid #000' }}>
                <thead>
                    <tr>
                        <th rowSpan="2">#</th>
                        <th rowSpan="2">Nome</th>
                        <th colSpan="2">Invictos</th>
                        <th colSpan="2">Warrions</th>
                        <th colSpan="2">Total</th>
                        <th>Soma A/D</th>
                    </tr>

                    <tr>
                        <td>Ataques</td>
                        <td>Defesas</td>
                        <td>Ataques</td>
                        <td>Defesas</td>
                        <td>Ataques</td>
                        <td>Defesas</td>
                    </tr>
                </thead>
                <tbody>
                    {sumary.map((player, index) => (
                        <tr key={index}>
                            <td>{index + 1}</td>
                            <td>{player.name}</td>
                            {player.teams.map((p, i) => (
                                <React.Fragment key={i}>
                                    <td>{p.attack}</td>
                                    <td>{p.defense}</td>
                                </React.Fragment>
                            ))}
                            <td>{player.attack}</td>
                            <td>{player.defense}</td>
                            <td>{player.sum}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

ReactDOM.render(<Debug />, document.querySelector('#root'))
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Resumindo: crie outro array com a sumarização e mostre-o com os dados já calculados.

1
  • 1
    Cara, você é um gênio. Já tem um tempo que tento resolver isso e sua resposta deu certinho com o que queria. Muito obrigado mesmo. 19/12/2020 às 1:34
2

Vou dar uma solução alternativa a outra resposta, pois ela usa o useEffect e não sei se você pretende usar este hook.

Basicamente você pode seguir 3 passos:

  1. Criar uma funcão que calcula SomaAD para cada um dos players e retorna um array com o valor desse calculo. Chamei de somaAD, por exemplo.
  2. Crair uma funão que ordena o array retornado pela funcão de cima e retornao array ordenado de forma decrescente baseado no valor de somaAD.
  3. Criar uma funcão que renderiza o array calculado e ordenado.

A funcão que calcula somaAD para cada um dos players:

  const calculateSomaAD = (players) => {
    return players.map(player => {
      return {
        ...player, somaAD: (player.teams.reduce((a, b) => a + b.attack, 0) +
          player.teams.reduce((a, b) => a + b.defense, 0))
      };
    });
  };

A funcão que ordena o array baseado no valor de somaAD e retorna o array ordenado:

  const orderPlayers = (arr) => {
    return arr.sort((a, b) => b.somaAD - a.somaAD); // decrescente
  };

A funcão que renderiza o array calculado e ordenado:

  const render = () => { // funcao que monta os componentes
    const array = calculateSomaAD(players); // calcula somaAD primeiro
    const orderedArray = orderPlayers(array); // ordena o array

    return orderedArray.map((player,index) => ( // monta as <tr>
      <tr key={index}>
        <td>{index + 1}</td>
        <td>{player.name}</td>
        {player.teams.map((p, i) => (
          <React.Fragment key={i}>
            <td>{p.attack}</td>
            <td>{p.defense}</td>
          </React.Fragment>
        ))}
        <td>{player.teams.reduce((a, b) => a + b.attack, 0)}</td>
        <td>{player.teams.reduce((a, b) => a + b.defense, 0)}</td>
        <td>
          {player.somaAD}
        </td>
      </tr>
    ));
   };

Código completo:

console.clear();

const Debug = () => {
  const [players, setPlayers] = React.useState([
    {
      name: 'Tiago',
      teams: [
        { name: 'Invictos', attack: 18, defense: 5 },
        { name: 'Warrions', attack: 10, defense: 2 },
      ],
    },
    {
      name: 'Carlos',
      teams: [
        { name: 'Invictos', attack: 13, defense: 7 },
        { name: 'Warrions', attack: 9, defense: 3 },
      ],
    },
    {
      name: 'Ana',
      teams: [
        { name: 'Invictos', attack: 18, defense: 8 },
        { name: 'Warrions', attack: 17, defense: 5 },
      ],
    },
  ]);

  const calculateSomaAD = (players) => {
    return players.map(player => {
      return {
        ...player, somaAD: (player.teams.reduce((a, b) => a + b.attack, 0) +
          player.teams.reduce((a, b) => a + b.defense, 0))
      };
    });
  };

  const orderPlayers = (arr) => {
    return arr.sort((a, b) => b.somaAD - a.somaAD);
  };

  const render = () => {
    const array = calculateSomaAD(players);
    const orderedArray = orderPlayers(array);

    return orderedArray.map((player,index) => (
      <tr key={index}>
        <td>{index + 1}</td>
        <td>{player.name}</td>
        {player.teams.map((p, i) => (
          <React.Fragment key={i}>
            <td>{p.attack}</td>
            <td>{p.defense}</td>
          </React.Fragment>
        ))}
        <td>{player.teams.reduce((a, b) => a + b.attack, 0)}</td>
        <td>{player.teams.reduce((a, b) => a + b.defense, 0)}</td>
        <td>
          {player.somaAD}
        </td>
      </tr>
    ));
  };

  return (
    <div>
      <table style={{ textAlign: 'center', border: '1px solid #000' }}>
        <thead>
          <tr>
            <th rowSpan="2">#</th>
            <th rowSpan="2">Nome</th>
            <th colSpan="2">Invictos</th>
            <th colSpan="2">Warrions</th>
            <th colSpan="2">Total</th>
            <th>Soma A/D</th>
          </tr>

          <tr>
            <td>Ataques</td>
            <td>Defesas</td>
            <td>Ataques</td>
            <td>Defesas</td>
            <td>Ataques</td>
            <td>Defesas</td>
          </tr>
        </thead>
        <tbody>
          {/* renderizamos aqui a tabela ordenada de forma decrescente */}
          {render()}
        </tbody>
      </table>
    </div>
  );
};

ReactDOM.render(<Debug />, document.querySelector('#root'));
<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Veja que eu usei:

<tbody>
 {render()}
</tbody>

porque eu particularmente não costumo inserir lógicas muito complexas no código que vai ser renderizado. Acho mais fácil de entender desta forma, criando uma funcão separada que monta o componente pra depois renderizar.

1
  • 1
    Muito bom cara, ajudou muito. Mas para meu problema o useEffect é necessario porque esses dados estão vindo de um banco de dados. Coloquei uma parte deles no players para melhor compreensão. Gostei muito da sua forma de organizar separando a parte mais complexa do render. Muito obrigado pela sua atenção. 19/12/2020 às 1:38

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 .