React DataTable, неспособный внедрить DataTable во второй раз ⇐ Jquery

[Anonymous]

У меня проблемы с повреждением данных в Reactable. Ниже приведен пример, который я собрал для всех, чтобы немедленно повторить проблему. В настоящее время я пытаюсь позволить пользователю выбрать дату, а затем динамически заполнять данные. Я сделал много испытаний и ошибок и заметил, что проблема возникает, когда я пытаюсь выбрать дату 2 -го времени с различными количествами строк, DataTable обновляется неправильно и показывает ниже ошибки для каждой дополнительной строки. Непрерывно обратно без какой -либо проблемы, потому что оба имеют одинаковое количество строк, но когда я переключаюсь на 1 мая с меньшим количеством строк, ниже ошибку показывает, что не имеет смысла для меня. Страница будет полностью сбой, если 1 -я выбранная дата - 1 мая, а затем переключится на любую другую дату. Когда строка становится другим, DataTable больше не будет обновляться, я предполагаю, что есть что -то, что я не выполнял правильно для повторного определения моего данных. thead "). remove (); $ ('#Пример tbody'). remove (); ** < /li>
< /ol>
Связанные ссылки < /strong> < /p>

React DataTable продолжает бросать ошибку. Не удалось выполнить «Удалить ребенка» ... < /li>
< /ol>
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.


исходный код
import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Card, Container, CardHeader, CardBody, FormGroup, Label, Input, Form } from 'reactstrap';
import 'datatables.net-dt/css/dataTables.dataTables.css';
import $ from 'jquery';
import 'datatables.net';

import { Table } from "reactstrap";

const StockSummary = () => {
const [stockDates, setStockDates] = useState([]);
const [selectedDate, setSelectedDate] = useState('');
const [investorData, setInvestorData] = useState([]);

const tableRef = useRef(null);

// Simulate loading stock dates
useEffect(() => {
const mockDates = [
{ stock_date: '2024-05-01' },
{ stock_date: '2024-05-02' },
{ stock_date: '2024-05-03' },
];
setStockDates(mockDates);
}, []);

// Format date function
const formatDate = (dateString) => {
const date = new Date(dateString);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
};

// Simulate fetching data on date change
const handleDateChange = (e) => {
const date = e.target.value;
setSelectedDate(date);

if (date === '2024-05-01') {
setInvestorData([
{ name: 'Alice', number_of_shares: 100, category_name: 'Retail', group_name: 'A' },
{ name: 'Bob', number_of_shares: 150, category_name: 'Retail', group_name: 'A' },
{ name: 'Charlie', number_of_shares: 200, category_name: 'Institutional', group_name: 'B' },
{ name: 'David', number_of_shares: 250, category_name: 'Retail', group_name: 'C' },
{ name: 'Eva', number_of_shares: 300, category_name: 'Institutional', group_name: 'C' },
]);
} else if (date === '2024-05-02') {
setInvestorData([
{ name: 'Frank', number_of_shares: 120, category_name: 'Retail', group_name: 'A' },
{ name: 'Grace', number_of_shares: 130, category_name: 'Retail', group_name: 'B' },
{ name: 'Hank', number_of_shares: 140, category_name: 'Institutional', group_name: 'C' },
{ name: 'Ivy', number_of_shares: 150, category_name: 'Retail', group_name: 'D' },
{ name: 'Jack', number_of_shares: 160, category_name: 'Retail', group_name: 'E' },
{ name: 'Karen', number_of_shares: 170, category_name: 'Retail', group_name: 'F' },
{ name: 'Leo', number_of_shares: 180, category_name: 'Institutional', group_name: 'G' },
]);
} else if (date === '2024-05-03') {
setInvestorData([
{ name: 'Frank 1', number_of_shares: 1200, category_name: 'Retail', group_name: 'A' },
{ name: 'Grace', number_of_shares: 130, category_name: 'Retail', group_name: 'B' },
{ name: 'Hank', number_of_shares: 320, category_name: 'Institutional', group_name: 'C' },
{ name: 'Ivy', number_of_shares: 10, category_name: 'Retail', group_name: 'D' },
{ name: 'Jack', number_of_shares: 100, category_name: 'Retail', group_name: 'E' },
{ name: 'Karen', number_of_shares: 170, category_name: 'Retail', group_name: 'F' },
{ name: 'Leo', number_of_shares: 180, category_name: 'Institutional', group_name: 'G' },
]);
} else {
setInvestorData([]);
}
};

// DataTable re-initialization
useEffect(() => {
if (investorData && investorData.length > 0) {
if ($.fn.DataTable.isDataTable('#investorTable')) {
$('#investorTable').DataTable().destroy();
// since headers will change
$("#example thead").remove();
$('#example tbody').remove();
}

setTimeout(() => {
$('#investorTable').DataTable({
destroy: true,
lengthChange: true,
autoWidth: true,
scrollCollapse: true,
});
}, 100);
}
}, [investorData]);

return (

Stock Summary

Select Stock Date




Select Date

-- Select Stock Date --
{stockDates.map((date) => (

{date.stock_date}

))}












Investor Data





Investor Name
Share Count
Category
Group



{investorData && investorData.map((investor, index) => (

{investor.name}
{investor.number_of_shares}
{investor.category_name}
{investor.group_name}

))}







);
};

export default StockSummary;



Подробнее здесь: https://stackoverflow.com/questions/796 ... econd-time