在渲染表时反映“不变违规”

Question

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

不变违规：findComponentRoot（...）...无法找到元素。 这可能意味着DOM意外地发生了变异（例如，通过浏览器），通常是因为在使用表时忘记了<tbody>，在<svg>父级中嵌套标签......或者使用非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}>修复了问题。 我不确定为什么我要将密钥设置为其他任何东西，但我认为我会分享以防其他人得到类似的错误。