使用 React devtools 可以对组件状态进行哪些更改？

Question

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

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

当我在 React devtools 中打开该组件时，我发现我可以通过双击这些字符串来编辑字符串，例如"jurassic"或"diplodocus"，但我显然无法更改“era”等键或恐龙数组。但是，可以使用 React DevTools 更改它，但我做得不正确。

我在 Google DevTools 中使用 React DevTools。

使用 React DevTools 可以或不可以更改组件状态中的哪些内容？

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

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

Answer 1

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

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

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

TL;DR：React DevTools 的某些 prop/state 编辑功能似乎被锁定，具体取决于 React 构建版本。如果您不确定正在查看哪个版本，请参阅上面的链接。如果您需要编辑已部署的 React 生产版本的 props，您（可能*）不能。很恼火，但我能感受到你的痛苦。

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

一些社论： 我希望上述内容不是真的，这尤其令人恼火，因为我不明白为什么有必要这样做。也许我对开发版本和产品版本之间的区别还不够了解，但您仍然可以使用 React DevTools 查看生产版本上的 props/state：能够编辑它似乎并不是一个很大的飞跃考虑到开发版本的功能就已经齐全了。但再一次，也许我没有看到这背后的原因。