反应开发工具中的钩子支持?

Hooks support in react dev tools?

我在 React Docs 中读到:

React Hooks are now supported by React DevTools. They are also supported in the latest Flow and TypeScript definitions for React. We strongly recommend enabling a new lint rule called eslint-plugin-react-hooks to enforce best practices with Hooks. It will soon be included into Create React App by default.

然后我将 React 更新到 16.8 并开始使用 hooks。但是在我的第一个组件中完成 useState()useContext() 之后,我无法使用 React Dev Tools 正确检查它们(见下图)。

有办法解决这个问题吗?

  const [loading, setLoading] = useState(false);
  const [error,setError] = useState(null);
  const [productDetails,setProductDetails] = useState(null);

  const firebase = useContext(FirebaseContext);

2019 年 12 月更新

带有 Hooks 支持的 React Dev Tools v4 已经发布。

React Dev Tools - Chrome

React Dev Tools - Firefox


原始答案

新版本的 React DevTools 可能已经发布,您应该使用它。

但在那之前,您可以使用的是:

https://react-devtools-experimental-chrome.now.sh/

从 Dan Abramov 的一位 tweets

那里得到了这个答案