问题

I try to do a datatable with server-side rendering.
我尝试创建一个带有服务器端渲染的数据表格。

I use primereact datatable v9.5
我使用 primereact 数据表格 v9.5。

I have a problem with multi-column sort: data received from the server are correct but primereact sorts data again.
我在多列排序方面遇到了问题：从服务器收到的数据是正确的，但 primereact 再次对数据进行排序。

For example, a part of data.
例如，部分数据。

{id:2, name:"124"},
{id:3, name:"5"}]

I want to sort by name
我想按名称排序

Server response:
服务器响应：

{id:2, name:"5"},
{id:1, name:"alex"}]

And displayed data:
并且显示的数据：

{id:3, name:"124"},
{id:1, name:"alex"}]

Here is a part of my code:
这是我的代码的一部分：

function DatatableContacts(props: {
  data: Array<ContactInterface>
  totalRecords: number
  loading: boolean
}) {
  const [data, setData] = useState(props.data) //要显示的数据

  const [first1, setFirstRow] = useState(0)
  const [rowsPerPage, setRowsPerPage] = useState(10)
  const [nbDataDisplayed, setNbDataDisplayed] = useState(props.totalRecords)
  //初始化排序
  const [sortMeta, setSortMeta] = useState([])

  //调用 API 的函数
  const fetchData = async (
    page: number,
    itemsPerPage: number,
    sort?: Array<{ field: string; order: number }>
  ) => {
    //从 API 获取数据的函数
    setData(fetchedData)
  }

  const handleSort = async (e: any) => {
    setSortMeta(e.multiSortMeta)
    await fetchData(1, rowsPerPage, e.multiSortMeta)
    setFirstRow(0)
  }

  return (
    <>
      <DataTable
        value={data}
        rows={rowsPerPage}
        first={first1}
        multiSortMeta={sortMeta}
        sortMode="multiple"
        responsiveLayout="scroll"
        dataKey="id"
        loading={isLoading}
        removableSort
        onSort={handleSort}
      >
        <Column
          field="id"
          header={t('contacts.id')}
        ></Column>
        <Column
          field="person.firstname"
          header={t('contacts.firstname')}
          sortable
        ></Column>
        <Column
          field="person.lastname"
          header={t('contacts.lastname')}
          sortable
        ></Column>
      </DataTable>
    </>
  )
}

data = [{id:1, name:"alex"},
{id:2, name:"124"},
{id:3, name:"5"}]

[{id:3, name:"124"},
{id:2, name:"5"},
{id:1, name:"alex"}]

[{id:2, name:"5"},
{id:3, name:"124"},
{id:1, name:"alex"}]

function DatatableContacts(props: {
data: Array<ContactInterface>
totalRecords: number
loading: boolean
}) {
const [data, setData] = useState(props.data) //données à afficher
const [first1, setFirstRow] = useState(0)
const [rowsPerPage, setRowsPerPage] = useState(10)
const [nbDataDisplayed, setNbDataDisplayed] = useState(props.totalRecords)
//initialisation du tri
const [sortMeta, setSortMeta] = useState([])
//fonction appel API
const fetchData = async (
page: number,
itemsPerPage: number,
sort?: Array<{ field: string; order: number }>
) => {
//function to get data from API
setData(fetchedData)
}
const handleSort = async (e: any) => {
setSortMeta(e.multiSortMeta)
await fetchData(1, rowsPerPage, e.multiSortMeta)
setFirstRow(0)
}
return (
<>
<DataTable
value={data}
rows={rowsPerPage}
first={first1}
multiSortMeta={sortMeta}
sortMode="multiple"
responsiveLayout="scroll"
dataKey="id"
loading={isLoading}
removableSort
onSort={handleSort}
>
<Column
field="id"
header={t('contacts.id')}
></Column>
<Column
field="person.firstname"
header={t('contacts.firstname')}
sortable
></Column>
<Column
field="person.lastname"
header={t('contacts.lastname')}
sortable
></Column>
</DataTable>
</>
)
}

答案1

得分: 0

我将"lazy"添加到数据表中，一切正常。