5

我有一个由一个对象组成的组件，该对象包含一个对象数组，而这些对象又具有键和字符串

this.state = {
  dinosaurs: [
    { era: "jurassic", name: "diplodocus", diet: "herbivore" },
    { era: "cretaceous", name: "velociraptor", diet: "carnivore" },
  ]
}

当我在 react devtools 中打开组件时，我发现我可以通过双击这些字符串来编辑字符串，但我显然无法更改诸如“era”之类的键或恐龙数组"jurassic"。"diplodocus"但是，可以使用 React DevTools 更改它，但我做错了。

我在 Google DevTools 中使用 React DevTools。

我可以使用 React DevTools 更改组件的状态，哪些不能更改？

我尝试查看 GitHub 自述文件，我可以在部分侧窗格中看到编辑状态的提及，但没有提及可以编辑和不能编辑的内容。

我查看了如何从浏览器设置 React 组件状态和道具，但有一条评论告诉用户阅读 React DevTools 的友好手册，以及没有解决使用 React DevTools 可能或不可能的答案。

4

1 回答 1

0

React DevTools 似乎根据您正在查看的页面是使用“React 的开发版本”还是“React 的生产版本”来锁定功能。

我目前正在尝试在应用程序的本地（开发）版本和同一应用程序的已部署（生产）版本之间进行调试。要在已部署（生产）版本中测试某些内容，如果我可以打开 React DevTools，单击组件并编辑道具，将会很有帮助。唉，据我所知，绝对没有办法通过 React DevTools 编辑该网站的生产构建版本中的一个道具。

将其与我的本地（开发）版本进行对比。我可以单击 React DevTools 中的任何组件，然后编辑我想要的任何道具（或状态），并且该组件会立即使用新的道具值呈现。这看起来非常简单明了：只需双击要编辑的内容并输入即可。

TL;DR：根据 React 构建版本，React DevTools 的某些属性/状态编辑功能似乎被锁定。如果您不确定您正在查看哪个版本，请参阅上面的链接。如果您需要在已部署的 React 生产版本上编辑道具，您（可能*）不能。加重，但我感觉到你的痛苦。

[*可能是因为 A）我可能是错的（那太好了，请有人评论如何做到这一点），首先不清楚何时可编辑与不可编辑；B）如果你能以某种方式欺骗 React DevTools 将页面视为开发构建，那么它可能是可能的（或者它可能会严重破坏），但检查这需要比我能省下的更多努力。]

一些社论： 我希望以上内容不是真的，这尤其令人恼火，因为我看不出有必要这样做的理由。也许我对 dev 和 prod 版本之间的区别还不够了解，但是您仍然可以使用 React DevTools 在生产版本上查看道具/状态：能够编辑它似乎并不是一个很大的飞跃考虑到当它是开发版本时，功能就在那里。但再一次，也许我没有看到这背后的原因。

于 2022-01-20T01:16:35.693 回答