React tabulator ref 在重新渲染时变为 null

Question

我正在使用 React-tabulator 模块将 Tabulator 与 React 结合使用。

我已将 'ref' 用于 table 组件并调用下载数据等操作。

import React, { Suspense, useEffect, useReducer, useRef } from 'react';
import PropTypes from 'prop-types';

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import {Button } from 'react-bootstrap';
import { ReactTabulator, reactFormatter } from "react-tabulator";
import { reducer } from '../common/reducer';
import ChangeStaffCompetency from './ChangeStaffCompetency';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
window.jspdf = jsPDF;

const luxon = require('luxon');
window.DateTime = luxon.DateTime;

// Initial states of StaffCompetency
const initialState = {
    changeStaffCompetencyShow: false,
    staffID: "",
    workflowName: "",
    competentTasks: "",
    competencyEditorRow: null,
};

const StaffCompetency = (props) => {

    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);
    
    // Reference for the tabulator
    let staffCompetencyTableRef = useRef(null);

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        staffCompetencyTableRef.current.download("json", "RTP_Staff_Competencies.json");
    }

    /***
     * ALL OTHER CODE
     */

    return (
        <>
            <h3 className="text-center"> Staff Competency </h3>
            <div>
                <Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
            </div>
            <div style={{clear: 'both'}}></div>
            <br></br>
            <ReactTabulator
                onRef={(r) => (staffCompetencyTableRef = r)}
                columns={staffCompetencyTableCoumns}
                options={staffCompetencyTableOptions}
            />
            <ChangeStaffCompetency
                show={state.changeStaffCompetencyShow}
                onHide={() => dispatch({ type: "changeStaffCompetencyShow", value: false })}
                staffID= {state.staffID}
                workflowName= {state.workflowName}
                competentTasks= {state.competentTasks}
                api={props.api}
                parentCallback = {handleCallback}
            />
        </>
        
    );
}

StaffCompetency.propTypes = {
    api: PropTypes.object.isRequired
};

export default StaffCompetency;

ChangeStaffCompetency 是一个 react-bootstrap 模态组件，用作自定义编辑器来编辑单元格的内容。

staffCompetencyTableRef 在第一次渲染时工作正常，但在重新渲染时变为 null；例如，当我打开和关闭 ChangeStaffCompetency 模式时。

我该如何解决？

谢谢

Answer 1

我通过将 useRef 变量 (staffCompetencyTableRef) 的类型更改为 const 并使用 const 变量的属性解决了这个问题做我的工作。

const StaffCompetency = (props) => {

    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);
    
    // Reference for the tabulator
    const staffCompetencyTableRef = useRef(null);

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        staffCompetencyTableRef.current.download("json", "RTP_Staff_Competencies.json");
    }

    /***
     * ALL OTHER CODE
     */

    return (
        <>
            <h3 className="text-center"> Staff Competency </h3>
            <div>
                <Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
            </div>
            <div style={{clear: 'both'}}></div>
            <br></br>
            <ReactTabulator
                onRef={(r) => (staffCompetencyTableRef.current = r.current)}
                columns={staffCompetencyTableCoumns}
                options={staffCompetencyTableOptions}
            />
            <ChangeStaffCompetency
                show={state.changeStaffCompetencyShow}
                onHide={() => dispatch({ type: "changeStaffCompetencyShow", value: false })}
                staffID= {state.staffID}
                workflowName= {state.workflowName}
                competentTasks= {state.competentTasks}
                api={props.api}
                parentCallback = {handleCallback}
            />
        </>
    );
}

感觉有点像把戏。如果有人知道更好的方法，请发表评论。

谢谢

React tabulator ref 在重新渲染时变为 null

React tabulator ref becomes null on rerendering

javascript

reactjs

react-bootstrap

tabulator