ReactJs“不变违规...”经典反应问题

2024-03-23

这是一个典型的反应问题,但我有点不知道如何处理它。 我只想动态渲染我的表格线,但我收到错误:” “未捕获错误:不变违规:processUpdates():无法找到元素的子元素 2。这可能意味着 DOM 意外变异(例如,通过浏览器),通常是由于在使用表、嵌套标签(例如,

、 或 、 或 在父级中使用非 SVG 元素。尝试使用 React ID 检查元素的子节点.2.1.0."

我知道 React 没有找到正确的 DOM 内容,但是如何处理呢?提前致谢 !

<div className="panel-body" style={panelstyle}>
              <Table striped bordered condensed hover>
                <thread>
                  <th> Currency </th>
                  <th> Amount </th>
                  <th> Issuer </th>
                  <th> Limit </th>
                  <th> Limit Peer </th>
                  <th> No-Ripple </th>
                </thread>
                <tbody>
                  {this.state.ripplelines[this.address] ?

                              this.state.ripplelines[this.address].lines.map(function(line,i) {

                            return      (<tr>
                                          <td> USD </td>
                                          <td> 1500 </td>
                                          <td> raazdazdizrjazirazrkaẑrkazrâkrp </td>
                                          <td> 1000000000 </td>
                                          <td> 0 </td>
                                          <td> True </td>
                                        </tr>)       
                            ;
                        })             
                  : ""}
                </tbody>
              </Table>
            </div>

这里有一个答案:React js:不变违规:渲染具有不同数量子行的表时的 processUpdates() https://stackoverflow.com/questions/26689900/react-js-invariant-violation-processupdates-when-rendering-a-table-with-a-di

只需在渲染之前准备好行即可!

render:
 var rows = [];
      if(this.state.ripplelines[this.address] ) {
        _.each(this.state.ripplelines[this.address].lines, function(line) {
           rows.push(                   <tr>
                                          <td> somestuff!</td>

                                        </tr>)
        }); 
      }
return (
    <Table striped bordered condensed hover>
                    <thead>
                      <th> Currency </th>
                      <th> Amount </th>
                      <th> Issuer </th>
                      <th> Limit </th>
                      <th> Limit Peer </th>
                      <th> No-Ripple </th>
                    </thead>     
                    <tbody>
                      {rows}    
                    </tbody>
              </Table>
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJs“不变违规...”经典反应问题 的相关文章

随机推荐

  • 为什么这个执行无效指针初始化的程序在 C 中编译得很好?

    我写了一个简单的C程序 我原以为它会编译失败 但不幸的是它在C中编译并运行良好 但在C 中编译失败 考虑下面的程序 include
  • 运行 jest 时设置 env 变量

    我在我的上定义了这个变量main ts const mockMode process env MOCK MODE 我只是创建一个测试并将此变量设置为 true 但在主要方面没有得到 true but false describe onBoo
  • WCF通用字典和理解WCF

    好吧 我在解决某个特定问题时遇到了很大的困难 通过服务传输对象 从概念上讲 这是有道理的 我认为 据我所知 除非明确定义 否则无法序列化泛型 所以我想提供我的例子 我根本无法去上班 意思是 我确信还有其他人也遇到过一些困难 当您提供帮助时是
  • 如何在未提升的情况下启动流程

    我的应用程序运行为requestedExecutionLevel set to highestAvailable 如何在未提升的情况下运行进程 我尝试了以下方法 但没有成功 Process Start new ProcessStartInf
  • 正确修复 Java 10 抱怨 jaxb-impl 2.3.0 进行非法反射访问的问题?

    我们正在考虑将一些遗留代码升级到 Java 10 由于 JAXB 默认情况下不可见 编辑 正确的长期解决方案是not使用各种 JVM 标志来规避该症状 但正确修复它 我已将此代码段添加到我的 pom xml 中
  • Mongodb 中将字段乘以值

    我一直在寻找一种方法来创建更新语句 该语句将采用现有的数字字段并使用表达式对其进行修改 例如 如果我有一个名为 Price 的字段 是否可以进行更新 将 Price 设置为现有值的 50 所以 给定 Price 19 99 我想做db co
  • indexOf 查找字符串中某个单词的所有出现位置

    我正在尝试使用 indexOf 查找句子中出现的所有字符 the 例如 如果句子是 那天我去了那里 则应返回 3 我能够做到这一点 直到找到第一个索引 但我不确定如何编写循环 我最初有一个 for 循环来搜索整个字符串 但它返回完整的字符串
  • 是否有工具可以可视化实时 Spring 应用程序上下文? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有任何工具可以获取完全构建 连线的 Spring 应用程序上下文并导出它的可视化 我说的是一个实时上
  • 如何将 C++ lambda 传递给需要函数指针和上下文的 C 回调?

    我正在尝试在使用标准函数指针 上下文范例的 C API 中注册回调 该 API 如下所示 void register callback void callback void void context 我真正想做的是能够注册一个 C lamb
  • SQL Server Filestream - 删除“速度”

    我第一次使用文件流数据类型 SQL Server 2008 当我进行一些快速插入 删除时遇到了问题 基本上 即使我手动调用垃圾收集器 文件实际从文件系统中删除的速度也比插入 删除速度慢得多 据我所知 CHECKPOINT 应该调用垃圾收集器
  • KAFKA 重启问题:在不删除 /tmp/kafka-logs 的情况下无法重启 kafka

    每当我尝试重新启动 kafka 时 都会出现以下错误 一旦我删除 tmp kafka logs 它就会得到解决 但它也会删除我的主题 有办法解决吗 ERROR Error while deleting the clean shutdown
  • Vim 自动生成 ctag

    现在我有以下内容 vimrc au BufWritePost c cpp h ctags R 这有几个问题 它很慢 为自上次标记生成以来未更改的文件重新生成标记 我必须按下输入按钮again写入文件后 因为不可避免的 按 Enter 或键入
  • Java 8 流:java.lang.IllegalStateException:结束大小 84758 小于固定大小 84764

    我在用Java 8 streams用于将映射值转换为数组的 API 我收到以下异常 Unhandled exception ScheduledExecutorService java lang IllegalStateException E
  • 检查 NSDate 是本周还是下周

    有没有办法检查 NSDate 是本周还是下周 我知道今天是 NSDate date 然后我该怎么办 使用 NSDateComponents 如下所示 NSCalendar gregorian NSCalendar alloc initWit
  • 将 .Net Core Web-API 迁移到 AWS Web Api 网关

    我有一个使用 Net Core 开发的 Web API 它有几个端点 GET POST 要求是将其移至 AWS API Gateway 该 Web API 是使用分层架构构建的 它有一个与 Db 层通信的业务层 该层拥有一些实体框架存储库
  • 如何使用 jax-rs 进行分段/表单文件上传?

    特别是 RESTeasy 如果 对于单个文件 有一个像这样的方法签名那就太好了 public void upload FormParam name FormParam file file InputStream 可行吗 还是我在做梦 似乎没
  • 将数据帧转换为向量(按行)

    我有一个包含像这样的数字条目的数据框 test lt data frame x c 26 21 20 y c 34 29 28 我怎样才能得到下面的向量 gt 26 34 21 29 20 28 我能够使用以下方法获得它 但我想应该有一种更
  • 微服务中的服务器到服务器通信

    我正在研究微服务架构 但我在这方面面临一些挑战 首先让我向您简要介绍一下架构 用户登录并获取签名令牌 该令牌将用于调用所有 REST API 将会有很多 API 服务器 其中 API 使用 Spring 安全性进行保护 并根据用户角色进行授
  • 奇数或偶数反斜杠和转义字符

    我对下面的代码有一点问题 import re pattern re compile r for text in r ok py r ok py r ok py r ok py r ok py search re search pattern
  • ReactJs“不变违规...”经典反应问题

    这是一个典型的反应问题 但我有点不知道如何处理它 我只想动态渲染我的表格线 但我收到错误 未捕获错误 不变违规 processUpdates 无法找到元素的子元素 2 这可能意味着 DOM 意外变异 例如 通过浏览器 通常是由于在使用表 嵌