javascript - 在渲染表格时 react 'Invariant Violation'

Question

尝试添加 onClick 时出现以下错误属性(property)给<td>表格内的元素。这是我的错误:

Invariant Violation: findComponentRoot(...) ... Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like ... or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with 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]被宣布为我的属性(property) <tr> .其中一个结果值是一个相当长的字符串，React 不会将其接受为有效键。改变 <tr key={i}>解决了问题。我不确定为什么我一开始就将 key 设置为其他任何东西，但我想我会分享以防其他人遇到类似的错误。