在渲染表時反映“不變違規”

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}>修復了問題。 我不確定為什么我要將密鑰設置為其他任何東西，但我認為我會分享以防其他人得到類似的錯誤。