Я пытаюсь отсортировать таблицу с данными, которые я получаю из API. По сути, я хочу, чтобы таблица была отсортирована по возрастанию или убыванию в зависимости от того, какая ячейка была нажата. Для этого я создал этот код, но я делаю что-то не так, но не могу его увидеть. Был бы рад, если бы кто-нибудь подскажет, где у меня проблемы. Я получаю это сообщение об ошибке каждый раз при запуске приложения: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Что у меня есть :

import React, { useState } from 'react';
import { Table } from 'semantic-ui-react';
import Moment from 'react-moment';
import _ from 'lodash'

const UserTable = ({ repoData }) => {
    const [initialObject, setInitialObject] = useState({
        column: null,
        data: repoData,
        direction: null
    });


    const handleSort = (clickedColumn) => {

        if (initialObject.column !== clickedColumn) {
            setInitialObject({
                column: clickedColumn,
                data: _.sortBy(initialObject.data, [clickedColumn]),
                direction: "ascending"
            })
            return
        }
        setInitialObject({
            data: initialObject.data.reverse(),
            direction: initialObject.direction === "ascending" ? "descending" : "ascending",
        })
    }

    return (
        <div >
            <Table sortable celled fixed>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell
                            sorted={initialObject.column === 'name' ? initialObject.direction : null}
                            onCLick={handleSort("name")}
                        >
                            Repository Name
        </Table.HeaderCell>
                        <Table.HeaderCell
                            sorted={initialObject.column === 'description' ? initialObject.direction : null}
                            onCLick={handleSort("description")}
                        >
                            Description
        </Table.HeaderCell>
                        <Table.HeaderCell
                            sorted={initialObject.column === 'created_at' ? initialObject.direction : null}
                            onCLick={handleSort("created_at")}>
                            Created At
        </Table.HeaderCell>
                    </Table.Row>
                </Table.Header >
                <Table.Body>
                    {initialObject.data.map(repos => {
                        return <Table.Row>

                            <Table.Cell>{repos.name}</Table.Cell>
                            <Table.Cell>{repos.description}</Table.Cell>
                            <Table.Cell> <Moment fromNow>{repos.created_at}</Moment></Table.Cell>
                        </Table.Row>

                    })}


                </Table.Body>
            </Table>
        </div>
    );
}

export default UserTable;

0
em_code 23 Май 2020 в 05:20

1 ответ

Лучший ответ

Проблема связана с onClick:

onClick={handleSort("name")} // <-- this will call the function on render it self
const handleSort = (clickedColumn) => {
    if (initialObject.column !== clickedColumn) {
        setInitialObject({  // <------------ HERE : this will also cause rerender
            column: clickedColumn,
            data: _.sortBy(initialObject.data, [clickedColumn]),
            direction: "ascending"
        })
        return
    }
    setInitialObject({ // <------------ HERE : this will also cause rerender
        data: initialObject.data.reverse(),
        direction: initialObject.direction === "ascending" ? "descending" : "ascending",
    })
}

Результат: бесконечный цикл

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Решение: измените его на:

onClick={() => handleSort("name")}
2
Vivek Doshi 23 Май 2020 в 02:34