Material ui 将useApiRef添加到组件时，材质ui XGrid停止渲染 从“React”导入React； 从“../hooks/UtilityHooks/useTable”导入{useTable}； 从“@material ui/x-grid”导入{XGrid，useApiRef}； const仪表板：React.FC=（）=>{ const[state，setState]=React.useState（[]）； const form=useForm（state，setState）； const productionTable=useTable（'Production'，form）； 常量[loading，setLoading]=React.useState（false）； const tableRef=useApiRef（）； React.useffect（（）=>{ （异步（）=>{ 试一试{ 设置加载（真） const data=await get（）；`正在此处提取数据` 设置状态（数据）； 设置加载（错误） }捕捉（错误）{ 设置加载（错误） } })() }, []) 返回( ) } 导出默认仪表板；

1/10刷新表进行渲染。但是9/10我必须通过点击屏幕来触发渲染

在useTable中，我需要运行一个函数来设置列以及其他内容。 它做得非常好，直到我添加useApiRef以订阅列重新排序更改等，以使用新的colorder/colwidth等设置一些用户状态； 当我注销ref时，我可以看到数据和列都在那里，但是视图没有相应地更新

---

看起来您正试图持久化用户对表的更改。你有没有想过怎么做？我希望对x-grid也这样做，并且需要将用户更改保存到数据库中，以便将来呈现表。看起来您正在尝试持久化用户对表的更改。你有没有想过怎么做？我希望对x-grid也能做到这一点，并且需要将用户更改保存到数据库中，以便将来呈现表。

import React from 'react';
import { useTable } from '../hooks/UtilityHooks/useTable';

import { XGrid, useApiRef} from '@material-ui/x-grid';



const Dashboard: React.FC = () => {
    const [state, setState] = React.useState([]);
    const form = useForm(state, setState);
    const productionTable = useTable('Production', form);
    const [loading, setLoading] = React.useState(false);

    const tableRef = useApiRef();

    
    
    React.useEffect(() => {

        (async() => {

            try{
                setLoading(true)
                const data = await get(); `Fetching data here`
                setState(data);
                setLoading(false)
          
            }catch(err){
                setLoading(false)

            }

        })()
 
    }, [])

 


    return (
        <React.Fragment>
            <GridContainer style={{height: "calc(100vh - 170px)", overflowY: "auto", padding: "10px"}}>
                <GridItem>

                    <XGrid 
                    apiRef={tableRef}
                    columns={productionTable.columns}
                    rows={state}
                    loading={loading}
                    pagination={true}
                    rowsPerPageOptions={[15,25,50]}
                    pageSize={15}

                />

     
                </GridItem>
            </GridContainer>

        </React.Fragment>
    )
}
export default Dashboard;