javascript - 在 React Developer Tool 中显示来自 useState 的状态变量的名称

问题描述

我正在学习react-hooks，我使用创建了一系列状态变量useState，当尝试调试并查看它的值时，我发现 React Developer Tool 没有显示分配给状态变量的名称而是文本状态，这很不方便，因为它无法从一开始就确定哪个变量是尝试调试的变量

更新 1

这是当前的源代码

import React, { useState, useEffect, Fragment } from "react";

function Main() {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState("redux");
  const [url, setUrl] = useState(
    "https://hn.algolia.com/api/v1/search?query=redux"
  );
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);

      try {
        const response = await fetch(url);
        const json = await response.json();

        setData(json);
      } catch (e) {
        setIsError(true);
      }

      setIsLoading(false);
    };

    fetchData();
  }, [url]);

  return (
    <Fragment>
      <form
        onSubmit={event => {
          setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);
          event.preventDefault();
        }}
      >
        <input value={query} onChange={event => setQuery(event.target.value)} />
        <button type="submit">Search</button>
      </form>

      {isError && <div>Something went wrong ...</div>}

      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {data.hits.map(item => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      )}
    </Fragment>
  );
}

export default Main;

我在 React Developer 工具中得到了这个

更新 2

我正在使用 Firefox 68

React Developer Tool 是否有可能显示使用创建的状态变量的名称useState？

标签： javascriptreactjsreact-hooks

看到这个问题：

https://github.com/facebook/react-devtools/issues/1215#issuecomment-479937560

这是开发工具在使用钩子时的正常行为。

我询问了库作者，因为我也希望它显示我的状态变量名称。他是这么说的：

@cbdeveloper 我还没有想到让 DevTools 能够像您要求的那样显示变量名称的好方法。DevTools 无法读取函数的私有变量，并且更改 API 以支持传入显示名称会增加组件代码的大小。它对我来说似乎也没有必要，更像是一个很好的拥有。

无论如何，这个总括性问题不是进行此类讨论的最佳场所。如果您对此感觉强烈，我建议您打开一个新问题。

javascript - 在 React Developer Tool 中显示来自 useState 的状态变量的名称

问题描述

解决方案

推荐阅读