在 React Developer Tool 中显示来自 useState 的状态变量的名称 [英] Show the name of state variables from useState in React Developer Tool

问题描述

我正在学习

更新 1

这是当前的源代码

import React, { useState, useEffect, Fragment } from "react";函数主(){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() =>{设置错误(假)；setIsLoading(true);尝试 {const 响应 = 等待 fetch(url);const json = 等待 response.json();设置数据(json)；}赶上(e){设置错误(真)；}setIsLoading(false);};取数据()；}, [网址]);返回 (<片段><表格onSubmit={event =>{setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);event.preventDefault();}}><输入值={query} onChange={event =>setQuery(event.target.value)}/><button type="submit">Search</button></表单>{isError &&<div>出了点问题...</div>}{正在加载?(<div>正在加载...</div>) : (<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a>))})}</片段>);}导出默认主；

我在 React Developer tool 中得到了这个

更新 2

我使用的是 Firefox 68

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

解决方案

看到这个问题:

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

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

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

<块引用>

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

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

I am learning react-hooks, I created a series of state variables using useState, when trying to debug and see its value I find that React Developer Tool does not show the name assigned to the state variable but the text State, this is inconvenient as it is not possible to identify from the beginning which variable is the one that is tried to debug

Update 1

This is the current source code

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;

I am getting this in React Developer tool

Updated 2

I am using Firefox 68

Is it possible that React Developer Tool shows the name of state variables created using useState?

解决方案

See this issue:

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

That's the normal behavior for the dev tool when using hooks.

I asked the library author about it, cause I also would like it to show my state variable names. And that's what he said:

@cbdeveloper I haven't thought of a good way for DevTools to be able to display the variable name like you're asking. DevTools doesn't have a way to read your function's private variables, and changing the API to support passing in a display name would increase the size of component code. It also just doesn't seem necessary to me, more like a nice to have.

Anyway, this umbrella issue is not the best place to have discussions like this. If you feel strongly about it, I suggest opening a new issue.

这篇关于在 React Developer Tool 中显示来自 useState 的状态变量的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！