reactjs - 在 react-table-6 中访问子表中的单元格

Question

我正在从服务器返回一个具有 QuestionList[x].AnswerList[y] 层次结构的数据集。使用示例文档，我能够正确显示数据，但是当我去编辑列表中的答案时，它会引发错误。

 constructor(props) {
        super(props);
        this.state = {
            banks: [],
            qbank: [], 
            cellinfo: [],
            //expanded: {"1":"false"},
            loading: true,        
            isAnswerDisabled: false,
            verifyDisabled: false,
            error: props.bError
        }

        this.renderEditable = this.renderEditable.bind(this);

    }

    renderEditable(cellInfo) {
        return (
            <div
                style={{ backgroundColor: "#fafafa" }}
                contentEditable
                suppressContentEditableWarning
                onBlur={e => {
                    const data = [...this.state.qbank];
                    data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
                    this.setState({ data });
                }}
                dangerouslySetInnerHTML={{

                    __html: this.state.qbank[cellInfo.index][cellInfo.column.id]
                }}
            />
        );
    }

    //state is showing as undefined here.. why??
    renderEditableSub(cellInfo) {      
        return (
            <div
                style={{ backgroundColor: "#fafafa" }}
                contentEditable
                suppressContentEditableWarning
                onBlur={e => {
                    const data = [...this.state.cellinfo];
                    data[cellInfo.index].AnswerList[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
                    this.setState({ data });
                }}
                dangerouslySetInnerHTML={{
                   // __html: this.state.qbank[cellInfo.index][cellInfo.column.id]
                    __html: cellInfo.value
                }}
            />
        );
    }

renderTable(qbank) {
        return (

            <ReactTable              
                data={qbank}
                columns={[
                    {
                        Header: "Type",
                        accessor: "QuestionTypeAbbrev",
                        Cell: this.renderEditable,
                        width: 75
                    },
                    {
                        Header: "Points",
                        accessor: "PointsAwarded",
                        Cell: this.renderEditable,
                        width: 75
                    },
                    {
                        Header: "Question",
                        accessor: "QuestionText",
                        Cell: this.renderEditable,
                        minWidth: 225
                    }


                ]}
                defaultPageSize={10}
                // expanded={{ "0": 'false' }}
                className="-striped -highlight"
                //getTrProps={(state, rowInfo, column, instance, expanded) => {
                //    return {
                //        onClick: e => {
                //            console.log(rowInfo);
                //            console.log(rowInfo.viewIndex);
                //            var rowIndex = "{'" + rowInfo.viewIndex + "':'true'}";
                //            console.log(rowIndex);
                //            // this.setState({ expanded: rowIndex });                         
                //            //this.setState({
                //            //    expanded: "{'" + rowInfo.viewIndex + "':'true'}"
                //            //});
                //        }
                //    };
                //}}
                SubComponent={row => {
                    return (
                        <div style={{ padding: "20px" }}>
                            <ReactTable
                                data={qbank[row.index].AnswerList} //where do i get the index for this.
                                columns={[
                                    {
                                        Header: "Is Answer",
                                        accessor: "IsAnswer",
                                        Cell: this.renderEditableSub,
                                        width: 50
                                    },
                                    {
                                        Header: "Choice",
                                        accessor: "AnswerChoice",
                                        Cell: this.renderEditableSub,
                                        minWidth: 175
                                    },
                                    {
                                        Header: "Feedback",
                                        accessor: "AnswerFeedback",
                                        Cell: this.renderEditableSub,
                                        minWidth: 175
                                    }
                                ]}
                                defaultPageSize={3}
                                showPagination={false}
                            />
                        </div>
                    );
                }}
            />
        );
    }

    render() {      
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : this.renderTable(this.state.qbank);
        return (
            <div>
                <Form.Group>
                    <h1>Question Bank Creator</h1>
                    <Form.Group>
                        <br />
                        <Form.Group className="col-md-12">
                            <FormText className="showError">{this.state.error}</FormText>
                        </Form.Group>
                    </Form.Group>
                    {contents}
                </Form.Group >
            </div>
        );
    }

在显示数据时的 renderEditableSub(cellInfo) 函数中，

__html: this.state.qbank[cellInfo.index][cellInfo.column.id]

抛出一个错误，所以我将其修改为

 __html: cellInfo.value

这有效，但是当我修改子表中的数据时，出现此错误：

这是尝试编辑之前的显示：

该错误告诉我“this”在以下行中未定义： const data = [...this.state.cellinfo]; 在 renderEditableSub 中。我不确定这是为什么？

提前致谢。