React Table在单击按钮时创建新的可编辑行

Question

嗨，我正在创建react表，我必须在表中添加一个新的可编辑表行，在这里我可以在表中添加新的行项目，这是我到目前为止所拥有的。

   <DefaultButton
              text='Add QnA'
              primary={ true }
              onClick={this.addNewQnaToTable}
            />

        <ReactTable
          data={this.state.items}


          PaginationComponent={Pagination}
          columns={[
            {
              columns: [
                {
                  Header: "Questions",
                  accessor: "Questions",
                 Cell: this.renderQuestionsEdit
                },
                {
                  Header: "Answer",
                  accessor: "Answer",
                  Cell: this.renderEditable
                },
                {
                  Header: "Classification",
                  accessor: "Classification",
                  Cell: this.renderEditableDropdown
                },
                {
                  Header: "Actions",
                  accessor: "Actions",
                  Cell: ({row}) => (<div>
                    <button onClick={()=>this.deleteQnA({row})}>Delete Question</button>
                   </div> )
                }
              ]
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />

因此在我编辑表格时它可以正确渲染，其中包含内容的所有单元格都可以使用我相应的cel渲染器进行编辑。所以我决定如果我在表中插入新的空白项目，以便可以对其进行编辑，这是我的代码来添加新行：

 public addNewQnaToTable(): void {
    console.log("add inline form");
    //add new editable row to table
    let newQnA = {
      Questions: "[{'label':' ','value':' '}]",
      Answer: " ",
      Classification: " "
    }

     this.setState((oldstate)=>({
      items: [...oldstate.items, newQnA]
     }));
     console.log("new row added");
  }

，但是什么也没有发生，并且该行不可编辑。如何添加新行以向表中输入新项目？我从React Table的文档中找不到任何内容