Question

我正在尝试制作this table sortable，但在示例中使用的是类组件，并且我具有功能组件。

我尝试这样做：

    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，但是我正在接收：

不变违反：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用中拥有多个React副本

完整代码在pastebin

中

Answer 1

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

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

您需要在任何功能之外的组件级别编写此代码。

另一个问题是，您对useState的定义不正确。 useState为您提供了一对值及其设置函数。

const [data, setData]  = useState(0)

现在您可以使用setData设置器功能来更改数据值，

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和功能组件制作排序表？

1 个答案: