Блог

У меня есть сетка данных Devextreme, этот источник данных datagrid раньше был простым состоянием массива [], и все работает нормально,

Но так как я меняю источник данных на этот новый источник данных const, я понял, что каждый раз, когда я изменяю КАКОЕ-либо состояние, например allowFind, или делаю что-либо, связанное с перезагрузкой сетки, в середине экрана сетка показывает сообщение о ПЕРЕЗАГРУЗКЕ и повторной загрузке данных

в этом примере у меня есть кнопка, которая выполняет ShowSearchBar, функция которой-изменить значение allowFind на true или false, чтобы отобразить или скрыть строку поиска по сетке данных, если вы посмотрите на определение сетки данных, которое я использую здесь allowFind:

 <SearchPanel visible={allowFind} highlightCaseSensitive={true} />
 

Я не знаю, почему использование такого источника данных заставляет сетку полностью перезагружать данные,
Если я установлю, например, источник данных= {[]}, один пустой массив, и я нажму кнопку showsearch, все будет работать, или если я установлю источник данных в константу массива, он тоже будет работать

 import React, { useState, useEffect } from "react";
import { Button } from "primereact/button"; 
import DataGrid, { Column, Grouping, GroupPanel, FilterRow, FilterPanel, HeaderFilter, Popup, SearchPanel, Export, Editing, Scrolling } from "devextreme-react/data-grid";
 
export const ACATG001 = () => {
  
    const [allowFind, setAllowFind] = useState(false); 
    const url = "http://localhost:0000/api"; 
    const dataSourceTC = AspNetData.createStore({
        key: ["Currency", "Date"],
        loadUrl: `${url}/ExchangeRates

`
    });

 
    function ShowSearchBar() {
        setAllowFind(allowFind => !allowFind);
    }


    return (
        <GeneralContainer>
             
            <DataGrid
                ref={textBoxRef}
                dataSource={dataSourceTC}
                allowColumnReordering={true}
                allowColumnResizing={true}
                allowGroup={true}
                showBorders={true}
                selection={{ mode: "single" }}
                onSelectionChanged={onSelectionChanged}
                onCellDblClick={onEdit}
                onRowInserted={onSave}
                onRowUpdated={onUpdated}
                height={"567PX"}
                allowSearch={true}
                onExporting={onExporting}
                rowAlternationEnabled={true}
            >
                <Export enabled={false} />
                <GroupPanel visible={allowGroup} />
                <SearchPanel visible={allowFind} highlightCaseSensitive={true} />
                <FilterRow visible={true} />
                <FilterPanel visible={true} />
                <HeaderFilter visible={true} />
                <Grouping autoExpandAll={true} />
                <Column dataField="Currency" caption="Currency" />
                <Column dataField="Date" caption="Date" />
                <Scrolling mode="infinite" />
                <Editing mode="popup">
                    <Popup title="Edit" showTitle={true} width={700} height={525} />
                </Editing>
            </DataGrid>
             
        </GeneralContainer>
    );
};