问题标签 [react-devtools]

根据 React 火焰图，NaiveSameValuesEveryRender > ArrayComponent 的渲染时间几乎是 MemoizedValues > ArrayComponent 的两倍。原因是酒吧的宽度几乎是原来的两倍。

但是，工具提示说渲染时间是相同的。那么渲染时间是多少？

NaiveSameValuesEveryRender > ArrayComponent 的渲染时间：

MemoizedValues > ArrayComponent 的渲染时间：

我正在尝试通过相同的表单添加和编辑记录。它工作正常，但在我刷新页面时进行编辑，输入值被擦除。正如我所注意到的，组件在存储值之前正在渲染，并且 useState 正在立即运行，请指导这样做......

编辑链接.js

LinkForm.js

请指导我们..

我的代码如下 -

主页.js

addNewTask.js

我收到了这个错误-

index.js:1 警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息：https ://reactjs.org/docs/forms.html#control-components

另外，我还没有添加提交功能。

我已经在 Google Chrome 上安装了 React Developer Tools 扩展来调试用 TypeScript 编写的 React 应用程序，但是一旦我开始调试应用程序并打开“组件”窗口，所有组件都显示为“匿名”。

当然，该应用程序主要使用功能组件。

有谁知道是否有办法让 React Developer Tools 在其组件树中显示组件名称？

脚蹼Hermes debugger不显示

请问如何让他正常显示？</p>

react-native：0.62.2（从0.61更新到0.62.2）

https://fbflipper.com/

https://reactnative.dev/docs/hermes

错误信息：

我对 React 和 Material UI 比较陌生。我已经很多年没有做过前端开发了，我正在修修补补。我真的很难弄清楚如何向后工作以在源代码中找到我要查找的内容，以识别格式问题、布局等。我将举一个例子，但实际上这是一个更广泛的问题如何调试和可视化 React 和 Material UI 生成的输出。

例如，我有一个非常简单的登录表单，基本上是从这里复制和粘贴的。在当前状态下，我有一个“眼睛”图标用于显示/隐藏密码。除了图标之外，文本框（材料 UI 输入字段）看起来几乎相同。我希望它们具有相同的宽度。我对 React 生成的内容、Material UI 生成的内容、如何准确识别哪些代码设置边框、颜色或字体大小等感到非常迷茫。Chrome 开发人员工具（包括 React 插件）很有帮助，但是在我的脑海中仍然是胡说八道 - 如此多的嵌套元素等等。

所以在下面的截图中，谁能告诉我如何通过代码“向后工作”来识别为什么顶部文本框与底部不同？（例如，父容器是否太宽/太窄）当我突出显示电子邮件的“FormControl”和密码的“FormControl”时，我找不到不同的特定部分。我在想某种容器。开发者工具的元素选项卡更加丑陋和混乱，无法解码。

谢谢！

甚至不知道从哪里开始这部分！我知道这是更原生的 HTML 而不是 React/Material 组件名称，但是类的数量等等是疯狂的！

我需要displayName一个 React 组件的属性。如果没有，React DevTools 会显示Anonymous. 我尝试为exportand单独一行const Titlebar = function(props){...}，但没有运气。DevTools 可以不直接读取函数名displayName吗？

我在 Chrome 中仅使用 React DevTools 时遇到问题。当我访问我的网站时，React 图标会亮起，它确认 React 正在使用中，但没有出现 Components 和 Profiler 选项卡。如果我在 Chrome 中访问另一个使用 React 的网站，我可以看到 DevTools，所以它只是我的网站。我已经在多台计算机上尝试过，但仍然看不到这些选项卡。如果我使用 Firefox React DevTools，它可以正常工作。我一直在寻找解决方案，但没有任何运气。这个问题才几天前才开始，以前它工作得很好。Chrome 的 Redux-DevTools 扩展确实适用于我的网站。

我有一个父组件，其中包含一些Filters子组件，如下所示：

Filters父组件中的子组件：

filters父组件中的状态：const [filters, setFilters] = useState<Array<IFilter | IDateFilter>>([]);

updateFilter方法需要几个参数，并写在父级中，如下所示：

resetFilter&resetFilters具有与此类似的结构。一旦它们被触发，就会发生与父filters更改一样的效果：

虽然它们似乎在工作，但我在我的控制台上有这个Warning: Cannot update a component from inside the function body of a different component. 正如这里建议的https://github.com/facebook/react/issues/18147，我已经尝试过这种方法，useEffect但useCallback它们似乎没有像updateFilter期望一些参数来调用它。

我刚刚更改了我的反应组件中的一些代码并保存以检查浏览器中的这些更改。但是当我去浏览器时，调试器会自动被触发，而我没有在我的整个代码库中使用调试器。

这是我在浏览器中得到的：