Reagieren dataTable, die dataTable zum zweiten Mal nicht intialisiert werden können ⇐ Jquery

[Anonymous]

Ich habe Probleme mit der Reinitialisierung meines Datentatbarens in React. Im Folgenden finden Sie ein Beispiel, das ich für alle zusammengestellt habe, um das Problem sofort zu replizieren. Derzeit versuche ich, den Benutzer das Datum auszuwählen und dann die Daten dynamisch neu zu bevölkern. Ich habe viele Versuche und Fehler vorgenommen und bemerkt, dass das Problem auftritt, wenn ich versuche, das Datum für das zweite Mal mit verschiedenen Zeilenzahlen auszuwählen. Das DataTable aktualisiert falsch und zeigt folgende Fehler für jede zusätzliche Zeilen. kontinuierlich ohne Probleme, weil beide die gleiche Anzahl von Zeilen haben, aber wenn ich mit weniger Zeilen auf den 1. Mai wechsle, zeigt der Fehler, was für mich keinen Sinn ergibt. Die Seite stürzt vollständig ab, wenn das 1. ausgewählte Datum am 1. Mai ist, und wechselt dann zu einem anderen Datum. Wenn die Zeile anders wird, wird der DataTable nicht mehr aktualisiert, und ich vermute, dass ich etwas nicht richtig durchführt habe. thead "). Remove (); $ ('#Beispiel tbody'). remove (); ** < /li>
< /ol>
Verwandte Links < /strong> < /p>

React DataTable werfen weiterhin keinen Fehler. Nicht ausführen, um das Kind zu entfernen ... < /li>
< /ol>

Code: Select all

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Quellcode [/b]

Code: Select all

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 (



[h4]Stock Summary[/h4]







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;