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

Question

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

不变违规：findComponentRoot(...) ... 找不到元素。这可能意味着 DOM 被意外变异（例如，被浏览器），通常是由于在使用表时忘记了

，嵌套标签如 ... 或在

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

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属性时存在，删除后运行无错误。

这个错误的原因是什么，我该如何解决？

【问题讨论】：

• 一切对我来说似乎都是合法的。我会尝试用 var 而不是 let 声明变量。
• reactjs 甚至可以做嵌套的返回语句吗？
• 为什么要将onClick 处理程序添加到所有td 元素？如果td-s 的数量很大，这可能会严重影响性能。您可以使用event delegation pattern 并仅将一个处理程序添加到tbody 的table

Answer 1

问题是user[key] 被声明为我的<tr> 的属性。结果值之一是一个相当长的字符串，React 不会接受它作为有效键。更改 <tr key={i}> 解决了这个问题。我不知道为什么我一开始就将密钥设置为其他任何东西，但我想我会分享一下，以防其他人遇到类似的错误。