在呈现表

Question

尝试将onClick属性添加到表内的<td>元素时，我收到以下错误。这是我的错误：

  

不变违规：findComponentRoot（...）...   无法找到元素。这可能意味着DOM意外地突变（例如，通过浏览器），通常是由于忘记了＆lt; tbody＆gt;。当使用表格时，在＆lt; svg＆gt;中嵌套标签...或者使用非SVG元素家长。尝试使用React ID检查元素的子节点。

我已经阅读了相同问题的一些变体，但大多数问题都是由于使用不正确的表结构造成的。我的桌子结构合理。这是我的全部功能：

render() {
    return (
        <table className="table table-hover">
            <thead>
                <tr>
                    <th>Field</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                {Object.keys(user).map(function(key) {
                    let val = user[key];
                    if (typeof val === 'string') {
                        return (
                            <tr key={user[key]}>
                                <th>{key}</th>
                                <td onClick={this.handleClick}>{val}</td>
                            </tr>
                        )
                    }
                }, this)}
            </tbody>
        </table>
    )
}

当我设置onClick属性时，错误仅存在，它在删除时运行时没有错误。

导致此错误的原因是什么？如何解决？

Answer 1

问题是user[key]被声明为我<tr>的属性。其中一个结果值是一个相当冗长的字符串，React不接受该字符串作为有效密钥。更改<tr key={i}>修复了问题。我不确定为什么我将密钥设置为其他任何东西，但我想我会分享以防其他人遇到类似的错误。