ReactJS Data Table не отображает значения, когда данные в таблице были изменены

Question

У меня есть таблица с данными:

<DataTable
    noHeader
    columns={documentColumns || []}
    data={allCompanyPersonDocuments}
    className="custom-datatable"
    highlightOnHover
    responsive={false}
    conditionalRowStyles={conditionalRowStyles}
    persistTableHead
/>

Столбцы выглядят следующим образом:

const documentColumns = [
    {
        name: '№',
        selector: row => row.index,
        sortable: false,
        wrap: true,
        width: '4rem',
        cell: (row, index) => index + 1,
    },
    {
        name: 'Document Name',
        selector: row => row.documentName,
        sortable: false,
        wrap: true,
        width: '25rem',
        cell: row => retrieveDocumentData(row, 'documentName'),
    },
................
]

где метод "retrieveDocumentData" обрабатывает данные в зависимости от имени столбца:

const retrieveDocumentData = (row, columnName) => {
    return (
        row.isUploaded ? (
        <>
        {
            row.collectionType === 'person' && !row.uniqueDocumentId ? (
                columnName === 'documentName' ? (
                    previewUploadedDocument(row, row.doc)
                ) : columnName === 'name' ? (
                    <>
                    <span className="d-block text-dark white-space-normal">{row.firstName + ' ' + row.lastName}</span>
                    </>
                    ) : columnName === 'role' ? (
                            <>
                            <span className="d-block text-dark white-space-normal">{row.role ? row.role : 'N/A'}</span>
                            </>
                        ) :
......................................................
        </>
))}

в одном из столбцов есть кнопка загрузки документа, и когда я загружаю документ, вызывается метод загрузки документа, в котором я изменяю документ в массиве "allCompanyPersonDocuments", а затем устанавливаю новое состояние объекта:

const updateCustomDocumentList = (doc) => {
    ..................................
    const documentlistIndex = allCompanyPersonDocuments.findIndex((obj) => obj.documentTypeId === response.data.data.documentTypeId && obj.personId === response.data.data.personId && obj.uniqueDocumentId === response.data.data.uniqueDocumentId);
    if (documentlistIndex !== -1) {
        allCompanyPersonDocuments[documentlistIndex].status = doc.status;
        allCompanyPersonDocuments[documentlistIndex].filePath = doc.filePath;
        allCompanyPersonDocuments[documentlistIndex].fileSize = doc.fileSize;
        allCompanyPersonDocuments[documentlistIndex].createdAt = doc.uploadedAt;
        allCompanyPersonDocuments[documentlistIndex].isUploaded = true;
    }
    const newDocsList = [...allCompanyPersonDocuments.filter(doc => doc.isUploaded).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)), ...allCompanyPersonDocuments.filter(doc => !doc.isUploaded)];
    
    setAllCompanyPersonDocuments([...newDocsList]);
    ......................................
};

В результате у меня нет обновленных данных в таблице. Т. е. у меня есть строка, но в ней нет данных. Может кто - нибудь сказать мне, в чем может быть проблема? Заранее спасибо.

Answer 1

Нельзя напрямую изменять allCompanyPersonDocuments, нужно сначала сделать копию массива через ... или concat и работать с ней.

Либо можно с помощью map создавать новый массив с нужными изменениями и сразу передавать его в setAllCompanyPersonDocuments:

setAllCompanyPersonDocuments(
    allCompanyPersonDocuments.map(obj => 
        (
            obj.documentTypeId === response.data.data.documentTypeId 
            && obj.personId === response.data.data.personId 
            && obj.uniqueDocumentId === response.data.data.uniqueDocumentId
        )
            ? {
                ...obj,
                status: doc.status,
                filePath: doc.filePath,
                fileSize: doc.fileSize,
                createdAt: doc.uploadedAt,
                isUploaded: true,
            }
            : obj
    )
);

БЛОГ НА HUSL

ReactJS Data Table не отображает значения, когда данные в таблице были изменены

Ответы (1 шт):