修改组件的状态然后调用“setState(this.state)”是一个好习惯吗?

2023-11-30

我正在使用 ReactJS。

我有一个有状态组件(秒表容器)和多个无状态子组件(秒表)。

在外部组件中,我正在做这样的事情:

// the outer component is a "container" for multiple stopwatches
tick: function() {
  for (var i = 0; i < this.state.stopwatches.length; i++)
    {
      // if a particular stopwatch is "started", I'll increase it's time
      if (this.state.stopwatches[i].status == "started")
        {
          this.state.stopwatches[i].time.seconds++;
          // do some processing
        }
    }
  // this is the suspicious code!
  this.setState(this.state);
}

请注意,我正在更改this.state属性,然后调用setState() on the state对象本身。这对我来说似乎很错误。但另一方面,为了not操纵state对象本身,我必须克隆它然后做setState(stateClone),但我不确定是否可以在 JS 中有效地克隆对象,也不确定我是否真的应该这样做。

我可以继续做吗setState(this.state) ?


而不是打电话this.setState(this.state)你可以打电话this.forceUpdate().

请记住,这不是推荐的更新组件状态的方法。如果您不确定自己的修改,请查看不变性助手.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

修改组件的状态然后调用“setState(this.state)”是一个好习惯吗? 的相关文章

  • 从数组数组中获取唯一值[重复]

    这个问题在这里已经有答案了 我有以下数组 let arr email protected cdn cgi l email protection email protected cdn cgi l email protection email
  • Jqplot 中两个系列数据的不同颜色条

    我想知道如何在 Jqplot 中为两个系列制作不同的颜色条 如果我只有一个系列数据 它的工作原理如下图所示 红色和绿色基于其值 但是 如果我有两个系列数据 我无法为每个系列数据配置两个系列颜色 目前我只能做这个图 我希望两个系列图可以根据其
  • JS如何获取多维数组的最大深度?

    我有一个多维数组 我想知道它的最大深度 我发现了这个灵魂 但它不适用于对象数组 const getArrayDepth arr gt return Array isArray arr 1 Math max arr map getArrayD
  • 全局 JavaScript 变量作用域:为什么这不起作用?

    所以我在玩 JavaScript 时遇到了我认为奇怪的事情 有谁能解释一下以下内容吗 我已将警报值作为评论包含在内 为什么 foo 中的第一个警报 msg 返回不明确的并不是outside var msg outside function
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • 使用 JavaScript 填写 PDF 表单

    这就是我所拥有的 用户填写很长的 html 表单 用户获取下载不同 pdf 的链接 这是可填写的表格 链接是使用 javascript 生成的 用户单击链接 生成 url 使用用户之前提交的数据 在表单中处理数据并完成字段 这是在表单内使用
  • RequireJS 不遵循设置了 baseUrl 的 data-main 的相对路径

    使用 requireJS 我尝试为我的数据主指定一个与 baseUrl 不同的路径 看来 requireJS 会忽略我在文件名之前输入的任何内容 并始终在 baseUrl 文件夹中查找该文件 我有以下文件夹结构 index html scr
  • 在 Javascript 中,使用 var foo = function foo(i) { ... } 的动机或优点是什么?

    我在答案中看到 在Javascript中 为什么要写 var QueryStringToHash function QueryStringToHash query https stackoverflow com questions 3233
  • Angular 7 Guard 重定向仅适用于双击

    问题是我已经实现了一个 Guard 旨在处理特定的目录 如果当前用户名的角色等于 2 它应该返回 true 如果没有 那么它不应该重定向 这是我的 app routing module ts 文件 问题出在 userlist 路径中 我们是
  • Javascript 根据字段值任意排序数组

    所以我有一个对象数组 如下所示 var myArray priority low priority critical priority high 我需要以这种方式排序 1 关键 2 高和3 低 如何才能做到这一点 我建议使用一个对象来存储排
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD
  • 如何混淆或使 JavaScript 文件不可读?

    我的应用程序中有 JavaScript 脚本 其中包含 JavaScript 和 jQuery 函数 所有用户与我的应用程序的交互都是动态的 并且通过 jQuery 传递到应用程序 我意识到 当我在客户端运行我的应用程序时 客户端可以通过查
  • Niceedit本地上传图片失败

    我是这样称呼编辑的 new nicEditor buttonList bold italic underline upload iconsPath img nicedit png uploadURI http server com inte
  • 当元素具有多个类时如何在 switch 语句中检查 className

    在下面的示例中 我只想单击该选项以在警报中显示 我正在尝试使用 switch 语句来确定单击了哪个类 如果我的 div 不包含多个类 则我的示例将有效 我尝试使用classList contains在我的 switch 语句中无济于事 有没
  • NodeJS 中的缩进多行日志记录

    我要打印JSON stringify d 反对控制台 将上下文作为 Mocha 测试套件输出的一部分 当测试缩进时 我希望对象日志行向右缩进足够远 例如 3 4 个制表符空格 以便它们可以识别地位于右侧describe group 我怎样才
  • 是否可以从 webpack 中的文件名中删除特殊字符?

    长话短说 我的资产文件名中不能包含某些字符 例如连字符 我没有运气通过解析 webpack 文档来弄清楚是否可以使用正则表达式或类似的东西重命名文件 这样我就可以从我无法控制源文件名的 3rd 方包中删除任何连字符 我的超级天真的例子是这样
  • Webpack:如何使用动态捆绑组合两个完全独立的捆绑包

    我花了很多时间研究这个问题 但毫无结果 我知道代码分割和动态捆绑在 Webpack 中如何使用import承诺API 然而 我的用例是我有两个完全独立的包 使用不同的 webpack 版本分别生成 为了给您提供视角 我正在构建 React
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • 在 React 中使用 setTimeout() 并测试它

    我意识到我一直在使用setTimeout 在我的项目中 也许 比我应该做的更多 我进行了快速研究并浏览了 Github 上的一些开源 React 项目 并决定我应该询问一下 I use setTimeout主要是为了更改类名或添加样式以对

随机推荐