Javascript 如何使用react语义ui和功能组件生成排序表？

我试图使，但在这个例子中，我们使用类组件，我有一个功能组件

我试着这样做：

    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>
    )
}

const WorkOutList=props=>{
常量handleSort=（单击列）=>（）=>{
常量[列、数据、方向]=useState（0）；
如果（列！==单击列）{
这是我的国家({
栏目：点击栏目，
数据：\按（数据，[单击列]）排序，
方向：'上升'，
})
回来
}
这是我的国家({
data:data.reverse（），
方向：方向==‘上升’？‘下降’：‘上升’，
})
}
const renderRows=（）=>{
const list=props.list | |[]
返回列表.map（训练=>(
{workout.tempoGasto}h
{蒂波塔雷法}
{workout.data}
道具。移除训练（训练）}
>
德莱塔
))
}
返回(
速度
蒂波
数据
Ações
{renderRows（）}
)
}

我正在使用react和redux，但我收到：

不变冲突：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一应用程序中可能有多个React副本

---

完整代码在

中，这是因为您在函数内部使用了

useState

hook

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

const [data, setData]  = useState(0)

您需要在任何函数之外的组件级别编写此代码

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

const [data, setData]  = useState(0)

另一个问题是，

useState

的定义不正确<代码>使用状态为您提供一对值及其setter函数

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

const [data, setData]  = useState(0)

现在您可以使用

setData

setter函数更改数据值

setData(1)

阅读有关

useState

的更多信息

---

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

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

并使用

setData

setter函数进行状态更改

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

---

.

评论不用于扩展讨论；这段对话已经结束。