typescript - Hur kan jag implementera PrimeReact DataTable med lat inladdning

Jag skulle vilja visa data i PrimeReact (v9.3.1) DataTable med lazy load. Koden är här:

const [questionAnswerValues, setQuestionAnswerValues] = useState([]);
const [editedRow, setEditedRow] = useState<any>({});
const [selectedRow, setSelectedRow] = useState<any>({});
const [lazyLoading, setLazyLoading] = useState(false);

useEffect(() => {
    fetchRange(0,20);
}, []);

const fetchRange = (first: number, last: number) => {
    fetch(`/api/questionanswer/slice?first=${first}&last=${last}`).then((response) => response.json()).then(data => {
        console.log(data);
        data = [...questionAnswerValues, data];
        //setQuestionAnswerValues(data); //generate infinite render requests !!!
        setLazyLoading(false);
    });
}
const loadQuestionAnswerLazy = (event: any) => {
    console.log(JSON.stringify(event));
    let { first, last } = event;
    if (last !== 0) {
        fetchRange(first, last);
    }
}

Datatabellen ser ut så här:

        <DataTable value={questionAnswerValues} responsiveLayout="scroll" selectionMode="single" selection={selectedRow}
            onSelectionChange={(e) => setSelectedRow(e.value)} scrollable scrollHeight="400px"
            virtualScrollerOptions={{ lazy: true, onLazyLoad: loadQuestionAnswerLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading }}
            tableStyle={{ minWidth: '50rem' }}>
            <Column selectionMode="single" header="Select one"></Column>
            <Column field="_id" header="ID"></Column>
            <Column field="question_id.question" header="Question"></Column>
            <Column field="answer" header="Answer"></Column>
            <Column field="isCorrect" header="IsCorrect"></Column>
        </DataTable>

Första frågan är: Hur ska jag uppdatera datavärden utan oändlig rendering.

Andra frågan är: Att lägga till som data=[...questionAnswerValues, data] är inte användbart. Hur kan jag lägga till data till questionAnswerValues?

Tredje frågan: finns det någon React-datatable-implementation som kan visa poster som läggs till utan att dölja redan laddade poster?

Svar #1

Jag har ett fullt fungerande komplett PrimeReact Lazy Datatable-exempel som använder en riktig REST-tjänst och en PostgresQL-databas.

Projekt: https://github.com/melloware/quarkus-monorepo

Lazty DataTable-sidan specifikt om du bara vill titta på PrimeReact-koden: https://github.com/melloware/quarkus-monorepo/blob/main/src/main/webui/src/CrudPage.tsx