我正在尝试将数据加载到表中，但它不会删除旧的东西

Question

我有有效的reactJS代码，可将数据从excel工作表加载到表组件上。如果表为空，则工作正常。但是，如果我尝试加载另一个Excel文件，它将仅更新表的一部分，而不更新已被占用的东西。

这是我加载表的方式：

    table = () => {
    return (<Table striped bordered hover size="sm" ref={this.configUploadRef}>
        <tbody onChange={this.edit}>
        {this.state.data.map(row => {
            return (
                <tr ref={c => this.tdRef[this.state.data.indexOf(row)] = c}>
                    {row.map(cell => {
                            return (
                                <td>
                                    <EditableLabel text={cell}/>
                                </td>)
                        }
                    )}

                </tr>)
        })}

        </tbody>

    </Table>)

}

这就是我上传新的Excel工作表的方式。

    configFile = async configFile => {
    this.tdRef = [];
    await readXlsxFile(configFile).then((rows) => {
        this.setState({data: rows})
    }).then(
        console.log(this.table())
    )


}

有什么方法可以删除表中的所有数据，然后使用新内容填充它？

Answer 1

想通了。

添加关键道具，就这样。

<tr ref={c => this.tdRef[i] = c} key={randomstring.generate(12)}>

和

<td key={randomstring.generate(12)}>