Какие изменения в состоянии компонента я могу сделать, используя React devtools?

Question

У меня есть компонент, который состоит из объекта, который содержит массив объектов, который в свою очередь имеет ключи и строки

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

Когда я открываю компонент в реагирующих devtools, я могу редактировать строки, такие как "jurassic" или же "diplodocus" двойным щелчком по этим строкам, но я, видимо, не могу вносить изменения в такие ключи, как "эра" или массив динозавров. Тем не менее, можно изменить его с помощью React DevTools, но я делаю это неправильно.

Я использую React DevTools в Google DevTools.

Что можно и нельзя изменить в состоянии компонента с помощью React DevTools?

Я попытался просмотреть readme GitHub, и я вижу упоминание о состоянии редактирования на боковой панели раздела, но не упоминаю, что можно и нельзя редактировать.

Я посмотрел на Как установить состояние компонента React и реквизиты из браузера, но был комментарий, в котором пользователю предлагалось прочитать дружественное руководство для React DevTools, а также ответы, которые не касались того, что является или не возможно с помощью React DevTools.

Answer 1

Похоже, что React DevTools блокирует функциональность в зависимости от того, использует ли страница, на которую вы смотрите, .

В настоящее время я пытаюсь отладить что-то между моей локальной (разрабатываемой) версией приложения и развернутой (производственной) версией того же приложения. Чтобы протестировать что-то в развернутой (производственной) версии, было бы полезно, если бы я мог открыть React DevTools, щелкнуть компонент и отредактировать свойство. Увы, насколько я могу судить, абсолютно невозможно отредактировать один из реквизитов в этой рабочей версии веб-сайта с помощью React DevTools.

Сравните это с моей локальной (разрабатываемой) версией. Я могу щелкнуть любой компонент в React DevTools, затем отредактировать любой реквизит (или состояние), который захочу, и компонент немедленно отобразится с новым значением реквизита. Это кажется довольно простым и понятным: просто дважды щелкните то, что вы хотите отредактировать, и введите текст.

TL;DR: некоторые функции редактирования реквизита/состояния React DevTools кажутся заблокированными в зависимости от версии сборки React.Если вы не уверены, какую версию вы просматриваете, «разрабатываемую сборку React» или «производственную сборку React»перейдите по ссылке выше. Если вам нужно отредактировать props на чем-то, что является развернутой производственной сборкой React, вы (вероятно*) не сможете. Обидно, но я чувствую твою боль.

[*Возможно , потому что A) Я могу ошибаться (это было бы здорово, кто-нибудь, пожалуйста, прокомментируйте, как это сделать), во-первых, не очень ясно, когда это редактируется, а когда нет; Б) Если бы вы могли каким-то образом обмануть React DevTools, чтобы он обрабатывал страницу так, как будто это сборка для разработки, это могло бы быть возможно (или это могло бы ужасно сломаться), но проверка этого требует больше усилий, чем я могу сэкономить.]

---

Немного редактуры: хотелось бы, чтобы вышеизложенное не было правдой, и это особенно раздражает, потому что я не вижу причин, по которым это необходимо. Возможно, я недостаточно понимаю разницу между версиями dev и prod, но вы все равно можете просматривать реквизиты/состояние в производственной версии с помощью React DevTools: это не кажется большим скачком, чтобы иметь возможность также редактировать его. учитывая, что все функциональные возможности есть, когда это версия для разработки. Но опять же, может быть, я не вижу причин, стоящих за этим.