Question

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

更新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创建的状态变量的名称？

Answer 1

嗯，我不确定为什么它不显示名称，但是如果我试图创建一系列状态变量，有时我会只是将一个状态和setState变量初始化为一个空对象。我不确定这是否是最好的方法，但是也许在您的开发工具中，当您扩展状态属性名称时，它将显示状态属性名称。

import React from "react";

export default function App(props) {
  // Initializing the state
  const [state, setState] = React.useState({});
  
  // Changing the state
  setState({ ...state, text1: "hello world", text2: "foobar" });
  
  return (
    <div>
      {state.text1}
      <br />
      {state.text2}
    </div>
  );
}

Answer 2

看到此问题：

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

这是使用钩子时dev工具的正常行为。

我问图书馆作者关于它的原因，因为我也希望它显示我的状态变量名称。那就是他说的：

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

无论如何，这个伞式问题并不是进行此类讨论的最佳场所。如果您对此有强烈的建议，建议打开一个新期刊。

Answer 3

通过“常规” $1实现：

useState hook

您可以在其中“转换”它：

const [users, setUser] = useState([]);
const [profile, setProfile] = useState([]);
const [repo, setRepo] = useState([]);
const [loading, setLoading] = useState(false);
const [alert, setAlert] = useState(false);

您将得到以下结果：

对于const [state, setState] = useState[{ users: [], profile: [], repo: [], loading: false, alert: false }];，您可以使用set the state（source 1 / source 2）和要设置的rest operator：

state

将其用作// ...state => unchanged states // alert => state we want to change setState(state => ({ ...state, alert: true }));：

prop

您看到const { users, profile, repo, loading, alert } = state; <SomeComponent loading={loading} alert={alert} /> here并搜索：React docs

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

3 个答案: