在重登时，ref制表器ref变为空。

Question

我用的是制表器，用的是反应制表模块.

我在表组件中使用了'ref‘，并调用了一些操作，比如下载数据或任何可能的操作。

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是一个自举模式组件，用作自定义编辑器来编辑单元格的内容。

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}
            />
        </>
    );
}

感觉就像个骗局。如果有人知道更好的方法，请发表评论。

谢谢