gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:14:55 25 4
gpt4 key购买 nike

尝试添加 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 时,错误存在属性,它在删除时运行时不会出错。

此错误的原因是什么,我该如何解决?

最佳答案

问题是 user[key]被宣布为我的属性(property) <tr> .其中一个结果值是一个相当长的字符串,React 不会将其接受为有效键。改变 <tr key={i}>解决了问题。我不确定为什么我一开始就将 key 设置为其他任何东西,但我想我会分享以防其他人遇到类似的错误。

关于javascript - 在渲染表格时 react 'Invariant Violation',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34193306/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com