我如何使用 react-semantic-ui 和功能组件进行排序 table？

Question

我正在尝试制作 this table sortable 但在示例中使用 class 组件并且我有一个功能组件。

我尝试这样做：

    const WorkOutList = props => {

    const handleSort = (clickedColumn) => () => {

        const [column, data, direction] = useState(0);

        if (column !== clickedColumn) {
          this.setState({
            column: clickedColumn,
            data: _.sortBy(data, [clickedColumn]),
            direction: 'ascending',
          })

          return
        }

        this.setState({
          data: data.reverse(),
          direction: direction === 'ascending' ? 'descending' : 'ascending',
        })
    }

    const renderRows = () => {
        const list = props.list || []
        return list.map(workout => (

            <Table.Row key={workout.id}>
                <Table.Cell>{workout.tempoGasto}h</Table.Cell>
                <Table.Cell>{workout.tipoTarefa}</Table.Cell>
                <Table.Cell>{workout.data}</Table.Cell>
                <Table.Cell>
                    <Button
                    animated='vertical'
                    onClick={() => props.removeWorkout(workout)}
                    >
                        <Button.Content hidden>Deletar</Button.Content>
                        <Button.Content visible>
                            <Icon name='trash' />
                        </Button.Content>
                    </Button>
                </Table.Cell>
            </Table.Row>
        ))
    }

    return (
        <Table sortable celled fixed>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell
                     sorted={props.column === 'tempoGasto' ? direction : null}
                     onClick={handleSort('tempoGasto')}
                    >
                        Tempo
                    </Table.HeaderCell>
                    <Table.HeaderCell
                     sorted={props.column === 'tipoTarefa' ? direction : null}
                     onClick={handleSort('tipoTarefa')}
                    >
                        Tipo
                    </Table.HeaderCell>
                    <Table.HeaderCell
                     sorted={props.column === 'data' ? direction : null}
                     onClick={handleSort('data')}
                    >
                        Data
                    </Table.HeaderCell>
                    <Table.HeaderCell>
                        Ações
                    </Table.HeaderCell>
                </Table.Row>
            </Table.Header>

            <Table.Body>
                {renderRows()}
            </Table.Body>
        </Table>
    )
}

我正在使用 React 和 Redux，但我收到：

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

完整代码在pastebin

Answer 1

这是因为您在函数内部使用了 useState 钩子。

 const [column, data, direction] = useState(0);

您需要在任何函数之外的组件级别编写它。

另一个问题是，您对 useState 的定义不正确。 useState 给你一对值，它是 setter 函数。

const [data, setData]  = useState(0)

现在您可以使用 setData setter 函数更改数据值，

setData(1)

详细了解 useState here。

你实际上可以在状态中存储对象，

const [data, setData] = useState({
                            column: "",
                            data: "",
                            direction: "",
                        })

并使用setData setter函数来改变状态，

setData(prevState => ({
     ...prevState,
     column: clickedColumn,
     data: _.sortBy(prevState.data, [clickedColumn]),
     direction: 'ascending',
  })
)

Check this for how to use useState.

我如何使用 react-semantic-ui 和功能组件进行排序 table？

How i can make a sorted table using react-semantic-ui and functional component?

javascript

reactjs

semantic-ui-react